/*
Theme Name: LokmanAVM Blog
Template: kadence
Description: LokmanAVM icerik blogu icin editoryal cocuk tema. SEOTANK kurulumu, 31 Agustos 2026.
Author: SEOTANK
Version: 1.5
*/

/* =========================================================================
   TASARIM KARARI (buraya yaziliyor ki sonradan bakan neden boyle oldugunu bilsin)

   Konu: LokmanAVM bitkisel urun / aktar e-ticaretinin icerik blogu.
   Okuyucu: "hangi bitkisel cay ne ise yarar" diye arayan, satin almaya yakin kisi.
   Isi: soruyu cevaplamak, guven vermek, magazaya yonlendirmek.

   Ana site kalabalik bir magaza vitrini. Blog onun TERSI olmali: sakin, tek
   kolonlu, okunakli. Bu yuzden dekor yok, tek vurgu var.

   Palet markanin kendi yapragindan turedi (derin sifali yesil), zemin notr gri
   degil SICAK KAGIT - notr gri "secilmemis" gorunur.
   Tipografi: Lora (serif baslik, editoryal otorite, Turkce glifleri tam) +
   Karla (humanist sans govde). Varsayilan sans yigini bilerek kullanilmadi.
   ========================================================================= */

:root{
  --ground:#FAF8F3;   /* sicak kagit */
  --surface:#FFFFFF;
  --sunken:#F3F0E8;
  --ink:#1B2019;      /* sicak siyaha yakin */
  --body:#414A3D;
  --muted:#77806F;
  --faint:#9AA292;
  --line:#E6E2D8;
  --line-soft:#EFEBE2;
  --brand:#2E5A39;    /* logodaki yapraktan */
  --brand-deep:#22452C;
  --tint:#EEF3EC;
  --accent:#A9611B;   /* baharat amberi - AZ kullanilir */
  --r:10px;
  --r-lg:16px;
  --shadow:0 1px 2px rgba(27,32,25,.04), 0 14px 30px -22px rgba(27,32,25,.30);
  --wrap:1140px;
  --measure:68ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }

body{
  background:var(--ground) !important;
  color:var(--body);
  font-family:"Karla","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto}
a{color:var(--brand); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:4px}

h1,h2,h3,h4,h5{
  font-family:"Lora",Georgia,"Times New Roman",serif;
  color:var(--ink); font-weight:600; letter-spacing:-.012em; line-height:1.22;
  text-wrap:balance;
}

/* ---------- KABUK ---------- */
.site{background:var(--ground)}
.content-container, .site-container, .entry-content-wrap{background:transparent}
.content-bg, .entry-content-wrap{background:transparent !important; box-shadow:none !important}

/* ---------- BASLIK CUBUGU ----------
   Logo 1219x864 (neredeyse kare) ve tema onu serbest biraksa sayfanin yarisini
   kapliyor. Yukseklik SABITLENIYOR; genislik oranla gelir.
   78px: logo uc satir metin tasiyor (Lokman / www.lokmanavm.com / slogan); 52px'te
   ucu de okunmuyordu (ekran goruntusuyle olculdu). */
#masthead, .site-header{
  background:var(--surface); border-bottom:1px solid var(--line);
  box-shadow:none;
}
.site-branding img, .custom-logo, .site-header .site-logo img{
  height:78px !important; width:auto !important; max-height:78px !important;
  object-fit:contain;
}
/* Logo zaten "lokmanavm.com" yaziyor; yaninda site adini TEKRAR basmak gurultu. */
.site-branding .site-title, .site-title-wrap .site-title{ display:none !important; }
.site-branding .site-description{ display:none !important; }

.main-navigation a, .primary-menu-container a{
  font-family:"Karla",system-ui,sans-serif;
  font-size:15px; font-weight:600; letter-spacing:.005em; color:var(--ink);
}
.main-navigation a:hover{ color:var(--brand); }
.header-navigation .menu-item{ margin:0 2px; }

/* Mobil cekmece: menu ogeleri okunakli ve dokunulabilir (>=44px) olsun. */
.mobile-navigation a, #mobile-drawer .menu-item a{
  font-family:"Karla",system-ui,sans-serif;
  font-size:16px; font-weight:600; min-height:48px;
  display:flex; align-items:center;
}
#mobile-drawer .drawer-inner{ background:var(--ink); }
#mobile-drawer .menu-item a{ color:#EDF0E9 !important; border-bottom:1px solid rgba(255,255,255,.08); }
#mobile-drawer .menu-item a:hover{ color:#fff !important; }

/* ---------- SAYFA GENISLIGI ---------- */
.site-container, .content-container > .site-container{ max-width:var(--wrap); }

/* ---------- ARSIV BASLIGI (blog anasayfasi) ---------- */
.lok-masthead{
  padding:56px 0 40px; border-bottom:1px solid var(--line); margin-bottom:44px;
  text-align:center;
}
.lok-masthead .eyebrow{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); margin:0 0 14px; font-weight:600;
}
.lok-masthead h1{ font-size:clamp(30px,4.2vw,44px); margin:0 0 12px; }
.lok-masthead p{ color:var(--muted); font-size:17px; margin:0 auto; max-width:56ch; }

/* ---------- KATEGORI / ARSIV BASLIGI ----------
   Kadence `.entry-hero-container-inner` icin SOGUK MAVI-GRI (#EDF2F7) basiyor; sicak kagit
   paletinin yaninda yamali duruyordu (ekranda goruldu, DOM'dan olculdu). Anasayfadaki
   .lok-masthead ile AYNI dile getiriliyor: zemin yok, altta ince ayrac, ortali.
   Kategori aciklamasi burada GORUNUR metin olarak da yasiyor - ince duran arsiv sayfasina
   gercek icerik kazandiriyor (ayni metin meta aciklama olarak da kullaniliyor). */
.entry-hero-container-inner{ background:transparent !important; }
.entry-hero .entry-header{
  text-align:center; padding:52px 0 36px;
  border-bottom:1px solid var(--line); margin-bottom:40px;
}
.entry-hero .entry-title, .archive .page-title{
  font-size:clamp(28px,3.6vw,40px); margin:0 0 12px;
}
.archive-description, .taxonomy-description{
  color:var(--muted); font-size:16.5px; line-height:1.62;
  max-width:62ch; margin:0 auto;
}
.archive-description p, .taxonomy-description p{ margin:0; color:var(--muted); }

/* ---------- YAZI KARTLARI ---------- */
.entry.loop-entry{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:none; transition:box-shadow .22s ease, transform .22s ease;
  height:100%; display:flex; flex-direction:column;   /* satirdaki kartlar esit boyda biter */
}
.entry.loop-entry:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.entry.loop-entry .post-thumbnail{ margin:0; }
.entry.loop-entry .post-thumbnail img{
  width:100%; aspect-ratio:16/10; object-fit:cover; display:block;
}
.entry.loop-entry .entry-content-wrap{ padding:22px 24px 26px !important; flex:1; display:flex; flex-direction:column; }
.entry.loop-entry .entry-title{ font-size:20px; line-height:1.3; margin:0 0 10px; }
.entry.loop-entry .entry-title a{ color:var(--ink); text-decoration:none; }
.entry.loop-entry .entry-title a:hover{ color:var(--brand); }
.entry.loop-entry .entry-summary p{ color:var(--muted); font-size:15.5px; line-height:1.62; margin:0; }
.entry.loop-entry .entry-taxonomies, .entry-taxonomies a{
  font-family:"Karla",sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--brand);
  text-decoration:none;
}
.entry.loop-entry .entry-meta{ font-size:13px; color:var(--faint); }
/* "Devamini okuyun" baglantisi kartin ALTINA sabitlenir (kartlar esit hizada biter).
   Kadence bu baglantiyi .more-link-wrap > a.post-more-link olarak basiyor (DOM'dan okundu;
   .entry-actions bu temada YOK). */
.entry.loop-entry .more-link-wrap{ margin-top:auto; padding-top:14px; }
.entry.loop-entry a.post-more-link{
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brand); text-decoration:none;
  /* 🔴 min-height INLINE ogede etkisizdir - baglanti 15px kaliyordu (olculdu). inline-flex sart. */
  display:inline-flex; align-items:center; min-height:44px;
}
/* Tek yazarli blog: "lokmanavm" yazar satiri bilgi degil gurultu. */
.loop-entry .entry-meta .posted-by, .single .entry-meta .posted-by{ display:none; }

/* ---------- TEKIL YAZI ----------
   KAPAK: pozisyon PHP tarafinda 'above'a cekildi (bkz. functions.php lokmanavm_kapak_ustte),
   yani baslik artik gorselin uzerine BINMIYOR. Buradaki kurallar yalniz olcu/bosluk isi.
   Yukseklik clamp ile tavanlanir: oran tabanli padding masaustunde 530px'e cikiyordu ve
   metni ekranin altina itiyordu; 420px tavan editoryal bir kapak icin yeterli. */
.single .post-thumbnail{
  padding-bottom:0 !important;
  height:clamp(190px, 34vw, 420px) !important;
  margin:0 0 30px !important;          /* 'behind' duzeninin negatif marjina karsi guvenlik agi */
  border-radius:var(--r-lg); overflow:hidden;
}
.single .post-thumbnail-inner{ position:absolute; inset:0; }
.single .post-thumbnail img{ width:100%; height:100%; object-fit:cover; }

.single .entry-header{ text-align:left; margin:0 0 30px; }
.single .entry-header .entry-taxonomies{
  font-family:"Karla",sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; margin-bottom:12px;
}
.single .entry-header .entry-taxonomies a{ color:var(--brand); text-decoration:none; }
.single .entry-title{ font-size:clamp(28px,3.6vw,40px); margin:0 0 14px; }
.single .entry-meta{ font-size:13.5px; color:var(--muted); }

.entry-content{ max-width:var(--measure); }
.single .entry-content{ font-size:17.5px; }
.entry-content > *{ margin-bottom:1.05em; }
.entry-content h2{
  font-size:clamp(22px,2.5vw,27px); margin:2.1em 0 .6em; padding-top:.2em;
}
.entry-content h3{ font-size:19.5px; margin:1.6em 0 .5em; color:var(--brand-deep); }
.entry-content p{ color:var(--body); }
.entry-content strong{ color:var(--ink); font-weight:700; }
.entry-content ul,.entry-content ol{ padding-left:1.35em; }
.entry-content li{ margin-bottom:.5em; }
.entry-content li::marker{ color:var(--brand); }

/* Icindekiler capa listesi (motorun urettigi ilk <ul>) daha sakin dursun */
.entry-content > ul:first-of-type a{ text-decoration:none; }

/* Tablolar: motor her makaleye 2-3 tablo koyuyor, bunlar icerigin omurgasi.
   display:block + overflow-x:auto => dar ekranda tablo KENDI icinde kayar,
   sayfa govdesi yatay kaymaz (390px'te olculdu: sayfa tasmasi 0). */
.entry-content table{
  width:100%; border-collapse:collapse; margin:1.6em 0;
  font-size:15.5px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:block; overflow-x:auto;
}
.entry-content thead th{
  background:var(--tint); color:var(--brand-deep); text-align:left;
  font-family:"Karla",sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.04em; text-transform:uppercase;
  padding:11px 14px; border-bottom:1px solid var(--line);
}
.entry-content td{ padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.entry-content tr:last-child td{ border-bottom:0; }

.entry-content blockquote{
  border-left:3px solid var(--brand); background:var(--tint);
  padding:16px 20px; margin:1.6em 0; border-radius:0 var(--r) var(--r) 0;
  color:var(--ink); font-style:normal;
}
.entry-content img{ border-radius:var(--r); }

/* Magazaya giden ic linkler: makalenin isi burada bitiyor, gorunur olmali */
.entry-content a{ font-weight:600; }

/* ---------- ALT BILGI ---------- */
#colophon, .site-footer{
  background:var(--ink); color:#C9CFC4; border-top:0; margin-top:64px;
}
#colophon a, .site-footer a{ color:#E6EADF; }
#colophon a:hover{ color:#fff; }
.site-footer .site-info{ font-size:14px; padding:26px 0; }

/* ---------- MOBIL ----------
   Dokunma hedefleri >=44px, yatay tasma SIFIR, kapak orani ekrana gore kisalir. */
@media (max-width:768px){
  body{ font-size:16.5px; }
  .site-branding img, .custom-logo{ height:58px !important; max-height:58px !important; }
  .lok-masthead{ padding:36px 0 26px; margin-bottom:28px; }
  .entry-hero .entry-header{ padding:32px 0 24px; margin-bottom:26px; }
  .entry-hero .entry-title, .archive .page-title{ font-size:26px; }
  .archive-description, .taxonomy-description{ font-size:15.5px; }
  .lok-masthead h1{ font-size:28px; }
  .lok-masthead p{ font-size:15.5px; }
  .entry.loop-entry .entry-content-wrap{ padding:18px 18px 22px !important; }
  .entry-content{ max-width:100%; }
  /* Kapak gorseli kapsayicisini TASMASIN (olculdu: 375px ekranda 383px genislik). */
  .single .post-thumbnail, .single .post-thumbnail-inner, .single .post-thumbnail img{
    max-width:100% !important;
  }
  .single .post-thumbnail{ height:clamp(170px, 52vw, 240px) !important; margin-bottom:22px !important; }
  .single .entry-title{ font-size:26px; }
  /* 🔴 DOKUNMA HEDEFLERI (olculdu, 390px gercek tarayici):
     hamburger 37x31 -> 44x44 · "Devamini okuyun" 15px -> 44px (yukarida inline-flex ile).
     Bunlar sayfadaki gercek KONTROLLER; parmakla isabet etmeleri sart. */
  .menu-toggle-open, .menu-toggle-close, .drawer-toggle{
    min-width:44px !important; min-height:44px !important;
    display:inline-flex !important; align-items:center; justify-content:center;
  }
  /* Kart icindeki kategori cipi bir metin baglantisi; 44px'e cikarmak kart duzenini
     bozar ve gorsel olarak sacma durur. Dokunma alani padding ile ~30px'e genisletildi -
     bilincli bir orta yol, kartin ASIL hedefi zaten baslik ve "Devamini okuyun". */
  .entry.loop-entry .entry-taxonomies a{ display:inline-block; padding:8px 0; }
}