/* =====================================================================
   osmaneli.info
   Renk: Lefke taşı (zemin) · dut yaprağı yeşili · nar · ayva sarısı
   Yazı: Bodoni Moda (başlık) · Archivo (metin)
   İmza: "dokuma şerit" — Lefke bezinin çözgü çizgileri
   ===================================================================== */

:root{
  /* Renkler doğrudan logodan örneklendi */
  --krem:       #F6EDDB;   /* mühür zemini */
  --krem-koyu:  #E8DCC2;
  --kagit:      #FCF8EE;
  --murekkep:   #2B1512;   /* kontur kahvesi */
  --murekkep-2: #6A5147;
  --bordo:      #5B172C;   /* OSMANELİ INFO yazısı */
  --bordo-koyu: #3E0F1E;
  --bordo-acik: #7A2038;
  --lacivert:   #26455F;   /* iç dairedeki gökyüzü */
  --halat:      #BA8B5F;   /* kurdele */
  --ayva:       #D2A62E;   /* ayvalar */
  --cizgi:      #DDD0B6;

  --olcu:  1160px;
  --gecis: 220ms cubic-bezier(.2,.6,.3,1);

  --f-display: "Bodoni Moda", "Playfair Display", Georgia, serif;
  --f-metin:   "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--krem);
  color:var(--murekkep);
  font-family:var(--f-metin);
  font-size:1.0625rem;
  line-height:1.72;
  font-weight:400;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--bordo-acik); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:.2em; }

:focus-visible{
  outline:2px solid var(--bordo-acik);
  outline-offset:3px;
  border-radius:2px;
}

.kap{ width:min(100% - 2.5rem, var(--olcu)); margin-inline:auto; }
.dar{ width:min(100% - 2.5rem, 760px); margin-inline:auto; }

/* ---------- İMZA: dokuma şerit ------------------------------------- */
.dokuma{
  height:9px;
  border:0;
  margin:0;
  background:
    repeating-linear-gradient(90deg,
      var(--bordo) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(90deg,
      var(--ayva) 4px 5px, transparent 5px 14px),
    repeating-linear-gradient(90deg,
      var(--halat) 9px 12px, transparent 12px 22px),
    var(--krem-koyu);
}
.dokuma--ince{ height:5px; }
.dokuma--koyu{ background-color:var(--krem-koyu); }

/* ---------- Tipografi ---------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0 0 .55em;
  color:var(--murekkep);
}
h1{ font-size:clamp(2.1rem,5.2vw,3.4rem); }
h2{ font-size:clamp(1.55rem,3.2vw,2.25rem); }
h3{ font-size:clamp(1.2rem,2vw,1.45rem); }

p{ margin:0 0 1.15em; }

.gozluk{                       /* eyebrow */
  font-family:var(--f-metin);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bordo-acik);
  margin:0 0 .9rem;
  display:block;
}
.gozluk--acik{ color:var(--ayva); }

.girizgah{                     /* lede */
  font-size:clamp(1.08rem,1.7vw,1.28rem);
  line-height:1.6;
  color:var(--murekkep-2);
  max-width:62ch;
}

/* ---------- Üst bar ------------------------------------------------- */
.ust{
  position:sticky; top:0; z-index:60;
  background:#fff;
  color:var(--murekkep);
  --logo-boy:46px;                      /* PHP tarafından ezilir */
}
.ust__ic{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.2rem; min-height:calc(var(--logo-boy) + 26px);
}
.marka{ display:flex; align-items:center; gap:.8rem; color:var(--murekkep); text-decoration:none; }
.marka:hover{ text-decoration:none; }
.marka__logo{ flex:none; width:auto; border-radius:50%; }
.marka__yazi{ display:flex; flex-direction:column; gap:.12rem; line-height:1; }
.marka__ad{
  font-family:var(--f-display);
  font-size:1.45rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; line-height:1; color:var(--bordo);
}
.marka--logolu .marka__ad{ font-size:1.3rem; }
.marka__eski{
  font-size:.6rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--murekkep-2);
}

.menu{ display:flex; gap:1.35rem; align-items:center; list-style:none; margin:0; padding:0; }
.menu a{
  color:var(--murekkep);
  font-size:.74rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  padding:.4rem 0; position:relative; text-decoration:none;
}
.menu a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:2px; background:var(--bordo); transition:right var(--gecis);
}
.menu a:hover::after,.menu a[aria-current="page"]::after{ right:0; }
.menu a:hover,.menu a[aria-current="page"]{ color:var(--bordo); }

.menu-dugme{
  display:none; background:none; border:1px solid var(--cizgi);
  color:var(--murekkep); padding:.5rem .8rem; cursor:pointer;
  font:inherit; font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}

/* ---------- Hero (ana sayfa) ---------------------------------------- */
.hero{
  background:var(--bordo);
  color:var(--kagit);
  padding:clamp(3.5rem,9vw,6.5rem) 0 clamp(3rem,7vw,5rem);
  position:relative; overflow:hidden;
}
.hero::after{            /* çözgü dokusu, çok hafif */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgba(252,248,238,.045) 0 1px, transparent 1px 13px);
}
.hero__ic{ position:relative; z-index:1; }

.adlar{ margin:0 0 2rem; }
.adlar__satir{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.adlar__ad{
  font-family:var(--f-display);
  font-size:clamp(2.4rem,10vw,6rem);
  line-height:.98; font-weight:400;
  color:rgba(252,248,238,.34);
  letter-spacing:-.02em;
}
.adlar__ad--simdi{ color:var(--kagit); font-weight:600; }
.adlar__yil{
  font-family:var(--f-metin);
  font-size:.68rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ayva); white-space:nowrap;
}
.adlar__cizgi{
  height:1px; background:rgba(252,248,238,.18);
  margin:.7rem 0;
}

.hero__metin{ color:rgba(252,248,238,.82); max-width:56ch; font-size:clamp(1rem,1.6vw,1.2rem); }
.hero__metin strong{ color:var(--kagit); font-weight:600; }

.kunye{
  display:flex; flex-wrap:wrap; gap:0;
  margin-top:2.5rem; border-top:1px solid rgba(252,248,238,.18);
}
.kunye__oge{
  padding:1.1rem 1.6rem 1.1rem 0; margin-right:1.6rem;
  border-right:1px solid rgba(252,248,238,.18);
}
.kunye__oge:last-child{ border-right:0; margin-right:0; }
.kunye__dt{
  display:block; font-size:.63rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ayva); margin-bottom:.25rem;
}
.kunye__dd{
  font-family:var(--f-display); font-size:1.35rem; color:var(--kagit); line-height:1;
}

/* ---------- Sayfa başlığı (iç sayfalar) ------------------------------ */
.sayfabas{
  background:var(--bordo);
  color:var(--kagit);
  padding:clamp(2.6rem,6vw,4.2rem) 0 clamp(2.2rem,5vw,3.4rem);
}
.sayfabas h1{ color:var(--kagit); margin-bottom:.4rem; }
.sayfabas .girizgah{ color:rgba(252,248,238,.78); }
.sayfabas .gozluk{ color:var(--ayva); }

.izyolu{
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(252,248,238,.6); margin-bottom:1.1rem;
}
.izyolu a{ color:rgba(252,248,238,.85); }

/* ---------- Bölümler ------------------------------------------------ */
.bolum{ padding:clamp(3rem,7vw,5rem) 0; }
.bolum--kagit{ background:var(--kagit); }
.bolum--koyu{ background:var(--lacivert); color:rgba(252,248,238,.85); }
.bolum--koyu h2,.bolum--koyu h3{ color:var(--kagit); }

.bolum__bas{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; margin-bottom:2.4rem;
}
.bolum__bas h2{ margin-bottom:.2rem; }
.bolum__bas p{ margin:0; color:var(--murekkep-2); max-width:52ch; }

.baglanti-ok{
  font-size:.76rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; white-space:nowrap;
  border-bottom:2px solid var(--bordo-acik); padding-bottom:.2rem;
}
.baglanti-ok:hover{ text-decoration:none; border-color:var(--ayva); }

/* ---------- Kart ızgarası ------------------------------------------- */
.izgara{ display:grid; gap:1.6rem; }
.izgara--3{ grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); }
.izgara--2{ grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); }

.kart{
  background:var(--kagit);
  border:1px solid var(--cizgi);
  display:flex; flex-direction:column;
  transition:transform var(--gecis), box-shadow var(--gecis);
}
.kart:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(43,21,18,.55); }
.kart a{ text-decoration:none; color:inherit; }

.kart__gorsel{
  aspect-ratio:4/3; overflow:hidden; background:var(--krem-koyu);
  position:relative;
}
.kart__gorsel img{ width:100%; height:100%; object-fit:cover; transition:transform 500ms ease; }
.kart:hover .kart__gorsel img{ transform:scale(1.04); }

.yertutucu{                 /* görsel yoksa: Lefke taşı deseni */
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:
    repeating-linear-gradient(90deg, rgba(43,21,18,.05) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(0deg,  rgba(43,21,18,.05) 0 1px, transparent 1px 16px),
    var(--krem-koyu);
}
.yertutucu span{
  font-family:var(--f-display); font-size:2.6rem;
  color:rgba(43,21,18,.22);
}

.kart__govde{ padding:1.35rem 1.35rem 1.5rem; flex:1; display:flex; flex-direction:column; }
.kart__etiket{
  font-size:.63rem; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--bordo-acik); margin-bottom:.6rem;
}
.kart h3{ font-size:1.28rem; margin-bottom:.5rem; }
.kart__ozet{ font-size:.94rem; color:var(--murekkep-2); margin:0 0 1rem; }
.kart__alt{
  margin-top:auto; padding-top:.85rem; border-top:1px solid var(--cizgi);
  font-size:.72rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bordo-acik);
}

/* ---------- Rozet ---------------------------------------------------- */
.rozet{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--ayva); color:var(--bordo-koyu);
  font-size:.62rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; padding:.28rem .6rem;
}

/* ---------- Rota (sıralı, numara burada anlamlı) --------------------- */
.rota{ list-style:none; margin:0; padding:0; counter-reset:durak; }
.rota li{
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem;
  padding:1.5rem 0; border-top:1px solid rgba(252,248,238,.16);
}
.rota li:last-child{ border-bottom:1px solid rgba(252,248,238,.16); }
.rota li::before{
  counter-increment:durak; content:counter(durak,decimal-leading-zero);
  font-family:var(--f-display); font-size:1.6rem;
  color:var(--ayva); line-height:1; padding-top:.15rem;
}
.rota h3{ margin-bottom:.3rem; font-size:1.2rem; }
.rota p{ margin:0; font-size:.95rem; color:rgba(252,248,238,.75); }
.rota__saat{
  font-size:.63rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ayva); display:block; margin-bottom:.3rem;
}

/* ---------- Mesafe listesi ------------------------------------------ */
.mesafe{ list-style:none; margin:0; padding:0; display:grid; gap:0;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.mesafe li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--cizgi);
}
.mesafe b{ font-family:var(--f-display); font-size:1.3rem; font-weight:500; }
.mesafe span{ font-size:.86rem; color:var(--murekkep-2); }
.bolum--koyu .mesafe li{ border-color:rgba(252,248,238,.16); }
.bolum--koyu .mesafe span{ color:rgba(252,248,238,.7); }

/* ---------- Makale gövdesi ------------------------------------------ */
.makale{ font-size:1.075rem; }
.makale h2{ margin-top:2.4rem; padding-top:1.3rem; border-top:1px solid var(--cizgi); }
.makale h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.makale h3{ margin-top:1.8rem; }
.makale ul,.makale ol{ padding-left:1.3rem; margin:0 0 1.2em; }
.makale li{ margin-bottom:.4em; }
.makale blockquote{
  margin:1.6rem 0; padding:.2rem 0 .2rem 1.4rem;
  border-left:3px solid var(--ayva);
  font-family:var(--f-display); font-size:1.2rem; color:var(--murekkep-2);
}
.makale img{ margin:1.6rem 0; border:1px solid var(--cizgi); }
.makale hr{ border:0; border-top:1px solid var(--cizgi); margin:2.2rem 0; }
.makale table{ width:100%; border-collapse:collapse; margin:1.4rem 0; font-size:.95rem; }
.makale th,.makale td{ border:1px solid var(--cizgi); padding:.6rem .8rem; text-align:left; }
.makale th{ background:var(--krem-koyu); font-weight:600; }

/* ---------- Bilgi kutusu -------------------------------------------- */
.kutu{
  background:var(--krem); border:1px solid var(--cizgi);
  padding:1.4rem 1.5rem; margin:1.8rem 0;
}
.kutu h3{ font-size:1.05rem; margin-bottom:.5rem; }
.kutu p:last-child{ margin-bottom:0; }
.kutu dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.45rem 1.2rem; font-size:.94rem; }
.kutu dt{ font-weight:600; color:var(--murekkep-2); }
.kutu dd{ margin:0; }

/* ---------- Galeri --------------------------------------------------- */
.galeri{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.galeri figure{ margin:0; border:1px solid var(--cizgi); background:var(--kagit); }
.galeri img{ aspect-ratio:4/3; object-fit:cover; width:100%; }
.galeri figcaption{ padding:.6rem .8rem; font-size:.8rem; color:var(--murekkep-2); }
.galeri a{ display:block; position:relative; }
.galeri a::after{
  content:"⤢"; position:absolute; right:.5rem; bottom:.5rem;
  width:28px; height:28px; display:grid; place-items:center;
  background:rgba(43,21,18,.72); color:#fff; font-size:.85rem;
  opacity:0; transition:opacity var(--gecis); pointer-events:none;
}
.galeri a:hover::after,.galeri a:focus-visible::after{ opacity:1; }

/* ---------- Büyütme penceresi ---------------------------------------- */
.buyut{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(43,21,18,.93);
  padding:clamp(1rem,4vw,3rem);
}
.buyut.acik{ display:grid; grid-template-rows:1fr auto; gap:1rem; }
.buyut__resim{
  min-height:0; display:grid; place-items:center;
}
.buyut__resim img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; box-shadow:0 20px 50px -20px rgba(0,0,0,.7);
}
.buyut__alt{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; color:rgba(252,248,238,.85); font-size:.88rem;
}
.buyut__sayac{ color:var(--ayva); font-weight:600; letter-spacing:.1em; font-size:.72rem; }
.buyut button{
  font:inherit; font-size:.74rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; background:transparent; color:var(--kagit);
  border:1px solid rgba(252,248,238,.4); padding:.5rem 1rem; cursor:pointer;
}
.buyut button:hover{ background:var(--kagit); color:var(--murekkep); }
.buyut__kapat{ position:absolute; top:.9rem; right:.9rem; }
.buyut__gezin{ display:flex; gap:.5rem; }
@media (max-width:600px){
  .buyut__alt{ font-size:.8rem; }
}

/* ---------- Form ----------------------------------------------------- */
.form{ display:grid; gap:1.1rem; }
.form__satir{ display:grid; gap:1.1rem; grid-template-columns:1fr 1fr; }
.alan{ display:flex; flex-direction:column; gap:.4rem; }
.alan label{
  font-size:.7rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--murekkep-2);
}
.alan input,.alan select,.alan textarea{
  font:inherit; font-size:.98rem; color:var(--murekkep);
  background:var(--kagit); border:1px solid var(--cizgi);
  padding:.72rem .85rem; border-radius:0;
  transition:border-color var(--gecis), box-shadow var(--gecis);
}
.alan input:focus,.alan select:focus,.alan textarea:focus{
  outline:none; border-color:var(--bordo);
  box-shadow:0 0 0 3px rgba(91,23,44,.16);
}
.alan textarea{ min-height:170px; resize:vertical; }
.alan small{ font-size:.78rem; color:var(--murekkep-2); }

.dugme{
  display:inline-block; font:inherit; font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  background:var(--bordo-acik); color:var(--kagit);
  border:1px solid var(--bordo-acik); padding:.85rem 1.7rem;
  cursor:pointer; transition:background var(--gecis), border-color var(--gecis);
  text-decoration:none;
}
.dugme:hover{ background:var(--bordo-koyu); border-color:var(--bordo-koyu); text-decoration:none; }
.dugme--hat{ background:transparent; color:var(--bordo-acik); }
.dugme--hat:hover{ background:var(--bordo-acik); color:var(--kagit); }

.uyari{ padding:.95rem 1.1rem; border-left:3px solid; font-size:.95rem; margin:0 0 1.4rem; }
.uyari--iyi{ background:rgba(91,23,44,.08); border-color:var(--bordo); }
.uyari--kotu{ background:rgba(122,32,56,.09); border-color:var(--bordo-acik); }

/* ---------- Filtre çubuğu -------------------------------------------- */
.filtre{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.2rem; }
.filtre a{
  font-size:.73rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  padding:.5rem .95rem; border:1px solid var(--cizgi);
  color:var(--murekkep-2); background:var(--kagit); text-decoration:none;
}
.filtre a:hover{ border-color:var(--bordo); color:var(--bordo); text-decoration:none; }
.filtre a.secili{ background:var(--bordo); border-color:var(--bordo); color:var(--kagit); }

/* ---------- Alt bilgi ------------------------------------------------ */
.alt{ background:#fff; color:var(--murekkep-2); padding:3.2rem 0 0; }
.alt__izgara{
  display:grid; gap:2.4rem;
  grid-template-columns:1.4fr 1fr 1fr;
  padding-bottom:2.6rem;
}
.alt h4{
  font-family:var(--f-metin); font-size:.68rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--bordo);
  margin:0 0 1rem;
}
.alt ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.alt a{ color:var(--murekkep-2); font-size:.92rem; }
.alt a:hover{ color:var(--bordo); }
.alt__logo{ width:104px; height:104px; border-radius:50%; margin-bottom:1rem; }
.alt__marka{ font-family:var(--f-display); font-size:1.7rem; color:var(--bordo); margin:0 0 .6rem; }
.alt__metin{ font-size:.92rem; max-width:42ch; margin:0; }
.alt__son{
  border-top:1px solid var(--cizgi);
  padding:1.3rem 0; display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; font-size:.8rem;
}

/* ---------- Duyarlı -------------------------------------------------- */
@media (max-width:860px){
  .menu-dugme{ display:block; }
  .menu{
    position:fixed; left:0; right:0; top:calc(var(--logo-boy) + 26px); background:#fff;
    flex-direction:column; align-items:stretch; gap:0;
    padding:.5rem 1.25rem 1.5rem; display:none;
    border-top:1px solid var(--cizgi);
    box-shadow:0 16px 26px -20px rgba(43,21,18,.5);
    max-height:calc(100vh - var(--logo-boy) - 26px); overflow-y:auto;
  }
  .menu.acik{ display:flex; }
  .menu a{ padding:.85rem 0; border-bottom:1px solid var(--cizgi); }
  .menu a::after{ display:none; }
  .alt__izgara{ grid-template-columns:1fr; }
  .form__satir{ grid-template-columns:1fr; }
  .kunye__oge{ border-right:0; padding-right:0; margin-right:0;
    flex:1 1 45%; border-bottom:1px solid rgba(252,248,238,.14); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .kart:hover{ transform:none; }
}

@media print{
  .ust,.alt,.dokuma,.menu-dugme{ display:none; }
  body{ background:#fff; }
}