/* ============================================================
   dr-home-a.css — Anasayfa (A), dereli teması düzeni:
   hero + haber kaydırıcısı (hero.php), Dereli Sosyal + Duyurular +
   Başkan (mayor.php), Hızlı İşlemler (quick.php).

   Görünüm dosyaları temanın DERLENMİŞ Tailwind utility'lerini
   (assets/css/dereli/tw.css — lacivert → Dereli yeşili; utility'ler
   KATMANSIZ, özgüllük 0,1,0) AYNEN kullanır. Burada iki şey durur:
     1) Köprü: belediye.css'in .bld-kapsamlı element kuralları
        (.bld h1–h5{color;font-weight;line-height;letter-spacing;margin},
        .bld a{color} / .bld a:hover, .bld img{height:auto} — 0,1,1) ve
        uzumnet-general'ın section h2 / section p kuralları utility'leri
        ezer. .sm-tw altında bunlar Tailwind preflight değerine sıfırlanır,
        bu elementlerde kullanılan utility'ler daha özgül (0,2,1) olarak
        yeniden bildirilir (header/footer'daki dereli-site.css deseni).
     2) tw.css'te bulunmayan birkaç kural (scroll-snap, hero örtüsü,
        sosyal kart marka renkleri, ikon ölçüsü).

   YÜKLEME: main.php'nin CSS listesinde değilse hero/mayor/quick
   görünümleri bu dosyayı bir kez <link> ile çeker; listeye (belediye.css
   ve dereli-site.css'ten SONRA) eklenirse görünümlerdeki blok kaldırılır.
   Dosya .bld kurallarından sonra gelmelidir — aynı özgüllükte kazanır.
   ============================================================ */

/* ── Bölüm kökü ─────────────────────────────────────────────── */
section.sm-tw{background-color:transparent;font-family:var(--bld-f-sec,var(--dr-font,Quicksand,'Quicksand Fallback',system-ui,sans-serif));color:#253C4F}

/* ── Başlıklar: .bld h1–h5 + section h2 sıfırlama (0,1,1) ─────── */
.sm-tw :is(h1,h2,h3,h4,h5,h6){display:block;width:auto;margin:0;padding:0;background:none;color:inherit;font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:normal}
/* başlıklarda kullanılan utility'ler — yeniden, daha özgül (0,2,1) */
.sm-tw :is(h1,h2,h3,h4,h5,h6).font-bold{font-weight:700}
.sm-tw :is(h1,h2,h3,h4,h5,h6).font-black{font-weight:900}
.sm-tw :is(h1,h2,h3,h4,h5,h6).leading-none{line-height:1}
.sm-tw :is(h1,h2,h3,h4,h5,h6).leading-tight{line-height:1.25}
.sm-tw :is(h1,h2,h3,h4,h5,h6).tracking-tight{letter-spacing:-.025em}
.sm-tw :is(h1,h2,h3,h4,h5,h6).text-white{color:#fff}
.sm-tw :is(h1,h2,h3,h4,h5,h6).text-\[\#253C4F\]{color:#253C4F}
.sm-tw :is(h1,h2,h3,h4,h5,h6).mb-4{margin-bottom:1rem}
@media (min-width:48rem){.sm-tw :is(h1,h2,h3,h4,h5,h6).md\:mb-6{margin-bottom:1.5rem}}
@media (hover:hover){.sm-tw h3.group-hover\/name\:text-\[\#A78851\]:is(:where(.group\/name):hover *){color:#A78851}}

/* ── Bağlantılar: .bld a / .bld a:hover sıfırlama ─────────────── */
.sm-tw a{color:inherit;text-decoration:inherit}
.sm-tw a:hover{color:inherit}
.sm-tw a.text-white,.sm-tw a.text-white:hover{color:#fff}
.sm-tw a.text-white\/90{color:rgba(255,255,255,.9)}
@media (hover:hover){.sm-tw a.hover\:text-white:hover{color:#fff}}

/* ── Görseller: .bld img{height:auto} ezmesin ──────────────────── */
.sm-tw img.h-full{height:100%}

/* ── Düşük özgüllüklü köprüler (0,0,1)/(0,0,2): çıplak element
      kurallarını sonradan gelerek yener, utility'lere (0,1,0) yenilir.
      uzumnet-general: button{padding:17.6px 24px;background:red;…}
                       section p{margin-bottom:30px;line-height:2;…} */
:where(.sm-tw) button{appearance:none;display:inline-block;padding:0;margin:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;line-height:inherit;letter-spacing:inherit;cursor:pointer;box-shadow:none}
section:where(.sm-tw) p{margin:0;padding:0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit}

/* ── tw.css'te olmayan kurallar ────────────────────────────────── */
/* Dereli DOM'unda geçmeyen (derlenmemiş) utility'ler */
.top-8{top:calc(var(--spacing,.25rem)*8)}
@media (min-width:64rem){
  .lg\:col-span-9{grid-column:span 9/span 9}
  .lg\:col-span-12{grid-column:span 12/span 12}
}
/* Yatay kaydırıcı: kaydırma çubuğu gizli, scroll-snap */
.sm-snap{scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-ms-overflow-style:none;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sm-snap::-webkit-scrollbar{display:none}
.sm-snap>*{scroll-snap-align:start;scroll-snap-stop:always}

/* Hero: Dereli'da düz lacivert zemin; bizde slider görselleri döner,
   üstüne aynı tondan yarı saydam yeşil örtü (metin okunurluğu için
   alta doğru koyulaşır). Görsel yoksa altındaki bg-title-color kalır. */
.sm-hero__ov{background:linear-gradient(180deg,color-mix(in srgb,var(--bld-navy,#0b2a4a) 22%,transparent) 0%,color-mix(in srgb,var(--bld-navy,#0b2a4a) 12%,transparent) 40%,color-mix(in srgb,var(--bld-navy-d,#071d36) 68%,transparent) 100%)}

/* Dereli Sosyal kartları: mobilde sütun genişliğinde (aspect-9/16
   yüksekliği belirler), lg'de yükseklikten türeyen genişlik. */
.sm-soc{width:100%}
@media (min-width:64rem){.sm-soc{width:auto}}
.sm-soc--facebook{background:#1877F2}
.sm-soc--instagram{background:linear-gradient(45deg,#f9ce34 0%,#ee2a7b 50%,#6228d7 100%)}
.sm-soc--twitter{background:#0f1419}
.sm-soc--youtube{background:#e60000}

/* Hızlı İşlemler: ikonlar Dereli'daki 18px svg ölçüsünde */
.sm-quick__ic i{font-size:17px;line-height:1}
.sm-quick__ic--m i{font-size:20px;line-height:1}

/* ── Hero slayt başlıkları: crossfade stack ─────────────────
   Tüm slayt başlıkları DOM'da; aktif olan akışta (yükseklik verir),
   diğerleri üzerine bindirilip opacity ile gizlenir. Böylece JS
   textContent yazmadan çeviri (Google Translate) korunur. */
.sm-hero__caps{position:relative;width:100%}
.sm-hero__cap{position:absolute;left:0;bottom:0;width:100%;opacity:0;visibility:hidden;transition:opacity .4s ease;pointer-events:none}
.sm-hero__cap.is-on{position:relative;opacity:1;visibility:visible;pointer-events:auto}