/*
Theme Name: Bursa Zoo
Theme URI: https://www.bursahayvanatbahcesi.com/
Author: Bursa Hayvanat Bahçesi
Description: Bursa Hayvanat Bahçesi için hazırlanmış, tür künyesi kartları ve ziyaret bilgisi şeridi olan modern WordPress teması. Renkler ve ziyaret bilgileri Görünüm > Özelleştir ekranından düzenlenir.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.6
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bursazoo
Tags: green, custom-colors, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ============================================================
   1. Değişkenler
   ============================================================ */
:root{
  --renk-koyu:#123526;
  --renk-yesil:#2E6B4F;
  --renk-fide:#8FB98A;
  --renk-amber:#E39A2B;
  --renk-gol:#16646B;
  --renk-kagit:#F4F6F0;
  --renk-murekkep:#1B2019;
  --renk-gri:#5F6B5E;
  --renk-cizgi:#D9E0D4;
  --govde:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --baslik:"Fraunces","Iowan Old Style",Georgia,serif;
  --olcu:1120px;
  --yumusak:14px;
}

/* ============================================================
   2. Temel
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--renk-kagit);
  color:var(--renk-murekkep);
  font-family:var(--govde);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--renk-yesil);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--baslik);font-weight:600;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.1rem)}
h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem)}
h3{font-size:1.3rem}
h4{font-size:1.08rem}
p{margin:0 0 1.1em;max-width:72ch}
:focus-visible{outline:3px solid var(--renk-amber);outline-offset:3px;border-radius:4px}
.ekran-disi{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.atla{position:absolute;left:-9999px;top:0;background:var(--renk-koyu);color:#fff;padding:12px 18px;z-index:999}
.atla:focus{left:8px;top:8px}

.kap{width:100%;max-width:var(--olcu);margin:0 auto;padding:0 20px}
.bolum{padding:64px 0}
.bolum--koyu{background:var(--renk-koyu);color:#EAF1E6}
.bolum--koyu h2,.bolum--koyu h3{color:#fff}
.bolum--koyu a{color:var(--renk-fide)}

.bolum-basligi{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.bolum-basligi h2{margin:0}
.bolum-basligi p{margin:0;color:var(--renk-gri);max-width:46ch}

.dugme{
  display:inline-block;background:var(--renk-yesil);color:#fff;
  padding:13px 26px;border-radius:999px;font-weight:600;font-size:.95rem;
  border:0;cursor:pointer;transition:background .18s ease;
}
.dugme:hover{background:var(--renk-koyu);text-decoration:none;color:#fff}
.dugme--amber{background:var(--renk-amber);color:var(--renk-koyu)}
.dugme--amber:hover{background:#cf8a1f;color:var(--renk-koyu)}
.dugme--cizgili{background:transparent;border:2px solid currentColor;color:var(--renk-koyu)}
.dugme--cizgili:hover{background:var(--renk-koyu);color:#fff;border-color:var(--renk-koyu)}

/* ============================================================
   3. Üst bant + başlık
   ============================================================ */
.ust-bant{background:var(--renk-koyu);color:#CFE0C8;font-size:.86rem}
.ust-bant .kap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;flex-wrap:wrap}
.ust-bant a{color:#CFE0C8}
.ust-bant__bilgi{display:flex;gap:20px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.ust-bant__bilgi li{display:flex;align-items:center;gap:7px}
.sosyal{display:flex;gap:12px;align-items:center;margin:0;padding:0;list-style:none}
.sosyal a{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.1)}
.sosyal a:hover{background:var(--renk-amber);color:var(--renk-koyu)}
.sosyal svg{width:15px;height:15px;fill:currentColor}

.site-basligi{background:#fff;border-bottom:1px solid var(--renk-cizgi);position:sticky;top:0;z-index:60}
.site-basligi .kap{display:flex;align-items:center;gap:24px;min-height:78px}
.marka{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.marka img{max-height:56px;width:auto}
.marka__yazi{font-family:var(--baslik);font-size:1.25rem;color:var(--renk-koyu);line-height:1.05}
.marka__yazi span{display:block;font-family:var(--govde);font-size:.72rem;color:var(--renk-gri);letter-spacing:.06em}

.menu-ac{margin-left:auto;display:none;background:none;border:1px solid var(--renk-cizgi);border-radius:10px;padding:9px 12px;cursor:pointer;color:var(--renk-koyu);font:inherit;font-size:.9rem;align-items:center;gap:8px}
.menu-ac b{display:block;width:18px;height:2px;background:currentColor;box-shadow:0 6px currentColor,0 -6px currentColor}

.ana-menu{margin-left:auto}
.ana-menu ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
.ana-menu li{position:relative}
.ana-menu a{display:block;padding:10px 13px;color:var(--renk-murekkep);font-size:.95rem;font-weight:500;border-radius:9px}
.ana-menu a:hover{background:#EDF2E9;color:var(--renk-koyu);text-decoration:none}
.ana-menu .current-menu-item > a,.ana-menu .current_page_item > a{color:var(--renk-yesil);box-shadow:inset 0 -2px 0 var(--renk-amber)}
.ana-menu ul ul{position:absolute;top:100%;left:0;display:block;min-width:220px;background:#fff;border:1px solid var(--renk-cizgi);border-radius:12px;padding:8px;flex-direction:column;box-shadow:0 14px 30px rgba(18,53,38,.12);opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s ease}
.ana-menu li:hover > ul,.ana-menu li:focus-within > ul{opacity:1;visibility:visible;transform:none}

/* ============================================================
   4. Ziyaret şeridi (hero altı pratik bilgi)
   ============================================================ */
.kahraman{position:relative;background:var(--renk-koyu)}
.kahraman__kareler{position:relative;min-height:clamp(340px,52vh,560px)}
.kahraman__kare{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.kahraman__kare.aktif{opacity:1}
.kahraman__kare img{width:100%;height:100%;object-fit:cover}
.kahraman__kareler::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,53,38,.45) 0%,rgba(18,53,38,0) 40%,rgba(18,53,38,.82) 100%);pointer-events:none}
.kahraman__yazi{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:38px}
.kahraman__yazi h1{color:#fff;margin:0 0 10px;max-width:16ch;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.kahraman__yazi p{color:#DCE8D6;max-width:44ch;margin:0}
.kahraman__ok{position:absolute;top:50%;z-index:3;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.82);color:var(--renk-koyu);font-size:20px;cursor:pointer;line-height:1}
.kahraman__ok--onceki{left:16px}
.kahraman__ok--sonraki{right:16px}
.kahraman__noktalar{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:8px}
.kahraman__noktalar button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer}
.kahraman__noktalar button[aria-current="true"]{background:var(--renk-amber);width:24px;border-radius:99px}

.ziyaret-seridi{background:#fff;border-bottom:1px solid var(--renk-cizgi)}
.ziyaret-seridi .kap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.ziyaret-kutu{padding:22px 24px 22px 0;border-right:1px solid var(--renk-cizgi)}
.ziyaret-kutu:last-child{border-right:0;padding-right:0}
.ziyaret-kutu:not(:first-child){padding-left:24px}
.ziyaret-kutu dt{font-size:.78rem;color:var(--renk-gri);margin-bottom:4px;letter-spacing:.03em}
.ziyaret-kutu dd{margin:0;font-family:var(--baslik);font-size:1.12rem;color:var(--renk-koyu);line-height:1.25}
.ziyaret-kutu small{display:block;font-family:var(--govde);font-size:.8rem;color:var(--renk-gri);margin-top:3px}
.durum{display:inline-flex;align-items:center;gap:7px;font-family:var(--govde);font-size:.85rem;font-weight:600;color:var(--renk-yesil)}
.durum b{width:8px;height:8px;border-radius:50%;background:var(--renk-yesil);box-shadow:0 0 0 4px rgba(46,107,79,.16)}

/* ============================================================
   5. Haber kartları
   ============================================================ */
.haber-izgara{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start}
.haber-liste{display:grid;gap:16px}
.haber-one{background:#fff;border-radius:var(--yumusak);overflow:hidden;border:1px solid var(--renk-cizgi)}
.haber-one img{width:100%;aspect-ratio:16/9;object-fit:cover}
.haber-one__govde{padding:24px}
.haber-one h3{font-size:1.5rem;margin-bottom:8px}
.haber-one h3 a{color:var(--renk-koyu)}
.haber-one p{color:var(--renk-gri);font-size:.97rem}
.haber-satir{display:flex;gap:14px;background:#fff;border:1px solid var(--renk-cizgi);border-radius:var(--yumusak);padding:12px;align-items:center}
.haber-satir img{width:86px;height:86px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.haber-satir h4{margin:0 0 4px}
.haber-satir h4 a{color:var(--renk-koyu)}
.haber-satir p{margin:0;font-size:.88rem;color:var(--renk-gri)}
.tarih{font-size:.8rem;color:var(--renk-gri);display:block;margin-bottom:6px}

/* ============================================================
   6. Tür künyesi — bu temanın imza öğesi
   ============================================================ */
.kunye-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.kunye{
  background:#fff;border:1px solid var(--renk-cizgi);border-radius:var(--yumusak);
  overflow:hidden;display:flex;flex-direction:column;
}
.kunye__gorsel{position:relative;aspect-ratio:4/3;background:#E7EDE3}
.kunye__gorsel img{width:100%;height:100%;object-fit:cover}
.kunye__grup{position:absolute;top:10px;left:10px;background:rgba(18,53,38,.9);color:#fff;font-size:.72rem;padding:4px 10px;border-radius:99px}
.kunye__govde{padding:16px 18px 18px;border-top:4px solid var(--renk-yesil);flex:1;display:flex;flex-direction:column}
.kunye__ad{font-family:var(--baslik);font-size:1.2rem;color:var(--renk-koyu);margin:0 0 2px}
.kunye__ad a{color:inherit}
.kunye__latin{font-style:italic;color:var(--renk-gri);font-size:.86rem;margin:0 0 12px}
.kunye__satirlar{margin:0 0 14px;display:grid;gap:5px;font-size:.86rem}
.kunye__satirlar div{display:flex;gap:8px}
.kunye__satirlar dt{color:var(--renk-gri);flex:0 0 92px}
.kunye__satirlar dd{margin:0;color:var(--renk-murekkep)}
/* IUCN koruma durumu ölçeği */
.iucn{margin-top:auto}
.iucn__etiket{font-size:.74rem;color:var(--renk-gri);display:flex;justify-content:space-between;margin-bottom:5px}
.iucn__olcek{display:flex;gap:3px}
.iucn__olcek span{flex:1;height:6px;border-radius:2px;background:#E2E8DE}
.iucn__olcek span.dolu{background:var(--renk-amber)}
.iucn__olcek span.kritik{background:#C0442F}
.iucn__ad{font-weight:600;color:var(--renk-koyu)}

/* ============================================================
   7. Kroki / plan + eğitim
   ============================================================ */
.kroki{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.kroki img{border-radius:var(--yumusak);border:1px solid rgba(255,255,255,.14)}
.kroki ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:10px}
.kroki li{display:flex;gap:10px;align-items:flex-start}
.kroki li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--renk-amber);margin-top:8px;flex:0 0 auto}

.etkinlik-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.etkinlik{background:#fff;border:1px solid var(--renk-cizgi);border-left:5px solid var(--renk-gol);border-radius:10px;padding:20px}
.etkinlik h3{font-size:1.1rem;margin-bottom:6px;color:var(--renk-koyu)}
.etkinlik p{font-size:.9rem;color:var(--renk-gri);margin:0}

/* ============================================================
   8. İçerik sayfaları
   ============================================================ */
.sayfa-ustu{background:var(--renk-koyu);color:#fff;padding:44px 0 38px}
.sayfa-ustu h1{color:#fff;margin:0}
.yol{font-size:.85rem;color:#B7CDB0;margin-bottom:10px}
.yol a{color:#B7CDB0}

.duzen{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;padding:48px 0}
.icerik{background:#fff;border:1px solid var(--renk-cizgi);border-radius:var(--yumusak);padding:34px}
.icerik img{border-radius:10px;margin:14px 0}
.icerik ul,.icerik ol{padding-left:20px}
.icerik li{margin-bottom:6px}
.icerik table{width:100%;border-collapse:collapse;margin:18px 0}
.icerik th,.icerik td{border:1px solid var(--renk-cizgi);padding:11px 13px;text-align:left}
.icerik th{background:#EDF2E9;font-family:var(--baslik);color:var(--renk-koyu)}
.icerik blockquote{border-left:4px solid var(--renk-amber);margin:18px 0;padding:4px 0 4px 18px;color:var(--renk-gri);font-style:italic}
.icerik figure{margin:18px 0}
.icerik figcaption{font-size:.85rem;color:var(--renk-gri)}

.yan{display:grid;gap:22px;align-content:start}
.kutucuk{background:#fff;border:1px solid var(--renk-cizgi);border-radius:var(--yumusak);padding:22px}
.kutucuk h3{font-size:1.05rem;color:var(--renk-koyu);margin-bottom:12px}
.kutucuk ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:.93rem}
.kutucuk ul ul{margin-top:9px;padding-left:14px}

.arama{display:flex;gap:8px}
.arama input[type="search"]{flex:1;min-width:0;padding:11px 14px;border:1px solid var(--renk-cizgi);border-radius:10px;font:inherit;font-size:.95rem;background:#fff}
.arama button{padding:11px 18px;border:0;border-radius:10px;background:var(--renk-yesil);color:#fff;font:inherit;font-weight:600;cursor:pointer}

.sayfalama{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.sayfalama .page-numbers{display:inline-block;padding:9px 15px;border:1px solid var(--renk-cizgi);border-radius:10px;background:#fff;color:var(--renk-koyu)}
.sayfalama .current{background:var(--renk-yesil);color:#fff;border-color:var(--renk-yesil)}

/* ============================================================
   9. Alt bilgi
   ============================================================ */
.site-alti{background:var(--renk-koyu);color:#C9DAC2;padding:52px 0 0;margin-top:10px}
.site-alti h3{color:#fff;font-size:1.05rem;margin-bottom:14px}
.site-alti a{color:#C9DAC2}
.site-alti a:hover{color:#fff}
.alt-izgara{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px;padding-bottom:40px}
.alt-izgara ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.93rem}
.alt-izgara p{font-size:.93rem;max-width:34ch}
.alt-serit{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;font-size:.85rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ============================================================
   10. Duyarlı düzen
   ============================================================ */
@media (max-width:960px){
  .haber-izgara{grid-template-columns:1fr}
  .kroki{grid-template-columns:1fr}
  .duzen{grid-template-columns:1fr}
  .alt-izgara{grid-template-columns:1fr 1fr}
  .ziyaret-seridi .kap{grid-template-columns:1fr 1fr}
  .ziyaret-kutu{border-bottom:1px solid var(--renk-cizgi)}
  .ziyaret-kutu:nth-child(2n){border-right:0;padding-right:0}
  .ziyaret-kutu:nth-child(2n+1){padding-left:0}
  .ziyaret-kutu:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:820px){
  .menu-ac{display:inline-flex}
  .ana-menu{position:fixed;inset:0;background:#fff;margin:0;padding:88px 20px 30px;overflow-y:auto;z-index:70;display:none}
  .ana-menu.acik{display:block}
  .ana-menu ul{flex-direction:column;align-items:stretch;gap:2px}
  .ana-menu a{padding:14px 12px;font-size:1.05rem;border-bottom:1px solid var(--renk-cizgi);border-radius:0}
  .ana-menu ul ul{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 14px}
  .menu-acikken{overflow:hidden}
  .menu-ac[aria-expanded="true"]{position:relative;z-index:80}
}
@media (max-width:640px){
  body{font-size:16px}
  .bolum{padding:44px 0}
  .icerik{padding:22px}
  .alt-izgara{grid-template-columns:1fr}
  .ust-bant .kap{justify-content:center;min-height:auto;padding-top:8px;padding-bottom:8px}
  .haber-satir{flex-direction:row}
  .kahraman__ok{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* Yazdırma */
@media print{
  .ust-bant,.ana-menu,.menu-ac,.kahraman,.site-alti,.yan{display:none}
  body{background:#fff}
  .icerik{border:0;padding:0}
}