/* ================================================================
   genel site stili
   Tasarımın renk, tipografi ve bileşen dili birebir korunur;
   sabit 1024 px kolon yerine tam genişlikte, duyarlı bir kap kullanılır.
   ================================================================ */

* { box-sizing: border-box; }
body { margin: 0; background: #fbfbfc; font-family: Poppins, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* Sayfa tarayıcı genişliğini tamamen kaplar.
   Dikeyde de en az ekran yüksekliği kadardır; içerik kısa kalsa bile
   alt bilgi (footer) ekranın dibine oturur, ortada boşlukta kalmaz. */
html, body { min-height: 100%; }
.page { width: 100%; margin: 0; background: #fbfbfc; color: #12365a; overflow-x: hidden;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.page > * { flex-shrink: 0; }
.page > footer { margin-top: auto; }

/* ---------------------------------------------------------------- kap (içerik genişliği)
   Tüm bölümler bu kabı kullanır: kenar boşlukları ekrana göre esner,
   çok geniş ekranlarda satır uzunluğu okunabilir kalır. */
.kap, .sayfa-bas, .bolum, .giris-sar, .tf-bolum, .sh-kabuk {
  width: 100%;
  /* Görsel varlıklar 2x (ör. ürün görselleri 436×216) üretildiği için kap bu genişlikte
     tutulur; daha fazlasında kartlar büyüyüp görseller yumuşamaya başlıyor. */
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 3vw, 46px);
  padding-right: clamp(16px, 3vw, 46px);
}

/* ---------------------------------------------------------------- başlık */
/* Duyarlı görseller <picture> içinde basılır; kutu üretmesin ki flex/grid içindeki
   <img> eskisi gibi doğrudan öğe kalsın (gorsel_etiket, app/varlik.php). */
picture { display: contents; }
/* <source> UA stilinde gizli DEĞİLDİR: display:contents'lı picture'ın içinde boş bir grid/flex öğesi olup
   ilk hücreyi kapıyordu (ürün sayfasında görsel 2. sütuna, metin 2. satıra kayıyordu). */
picture > source { display: none; }
/* Klavye kullanıcıları için "içeriğe geç": yalnızca odaklanınca görünür. */
.atla { position: absolute; left: -9999px; top: 8px; z-index: 300; background: #fff; color: #16385a;
  font-weight: 600; padding: 10px 16px; border-radius: 9px; box-shadow: 0 6px 20px rgba(18,54,90,.2); }
.atla:focus { left: 8px; outline: 2px solid #f5b301; }

header { background: #fff; position: relative; z-index: 50; }
/* Başlık yüksekliği logonun boyuna göre esner; logo yüksekliği panelden ayarlanır. */
.ust-ic { display: flex; align-items: center; min-height: 60px; padding-top: 10px; padding-bottom: 10px; }
/* Zemini şeffaflaştırılmış logo için karıştırma kipine gerek yok; şeffaf olmayan
   eski dosyalarda beyaz zemini beyaz çubuğa gömmek için multiply korunur. */
.ust-ic .marka img { display: block; width: auto; mix-blend-mode: multiply; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); margin-left: clamp(18px, 3vw, 48px); font-size: 13.5px; font-weight: 500; color: #16385a; }
.nav > a, .nav .menu > a { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.nav a:hover { color: #d19b00; }
.caret { font-size: 9px; color: #f0b400; }
/* "Şubemiz Olun": WhatsApp'a gider; yeşil rozet ile diğer bağlantılardan ayrılır */
.nav .sube { color: #128c4a; font-weight: 600; }
.nav .sube:hover { color: #0a6b37; }
.sube-ikon { width: 22px; height: 22px; border-radius: 50%; background: #25d366; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.nav .sube > .sube-ikon { margin-right: 2px; }
.tel { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.tel svg { width: 22px; height: 22px; display: block; flex: none; color: #f0b400; }
.tel .no { font-size: 15px; font-weight: 700; color: #16385a; letter-spacing: .2px; line-height: 1.25; white-space: nowrap; }
.tel .alt { font-size: 10.5px; color: #7c8a99; line-height: 1.25; }
.cta { display: flex; align-items: center; gap: 10px; margin-left: 26px; background: #011a38; color: #fff; font-size: 13px;
  font-weight: 700; letter-spacing: .4px; padding: 14px 22px; border-radius: 11px; white-space: nowrap; flex: none; }
.cta:hover { background: #123457; }
/* WhatsApp rozeti: yeşil daire içinde beyaz simge, yumuşak yeşil parıltı ve yavaş nabız halkası.
   Nabız yalnızca transform/opacity kullanır; "Hareketi durdur" ve reduced-motion'da durur. */
.cta-wa { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center; margin: -4px 0 -4px -8px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 4px 12px rgba(37,211,102,.55); }
.cta-wa svg { display: block; }
.cta-wa::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366;
  animation: ariWaNabiz 2.2s ease-out infinite; pointer-events: none; }
@keyframes ariWaNabiz { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
html.hareketsiz .cta-wa::before { animation: none; }
.cta:hover .cta-wa { background: #1fbe5b; box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 6px 16px rgba(37,211,102,.7); }
.nav-ac { display: none; background: none; border: none; font-size: 22px; color: #16385a; cursor: pointer; padding: 0 4px; margin-left: auto; }
/* Çekmece parçaları yalnızca dar ekranda var (bkz. tablet kırılımı). */
.nav-bas, .nav-dip, .nav-perde { display: none; }

/* açılır alt menüler
   Tetikleyici ile kutu arasında boşluk bırakılmaz: .menu aşağı doğru dolgu alır
   (negatif margin ile düzen bozulmaz), böylece fare aşağı inerken :hover kopmaz. */
.nav .menu { position: relative; padding-bottom: 18px; margin-bottom: -18px; }
.nav .alt { position: absolute; top: 100%; left: -14px; min-width: 214px; background: #fff; border: 1px solid #eef0f3;
  border-radius: 12px; box-shadow: 0 12px 30px rgba(18,54,90,.14); padding: 8px; display: none; z-index: 60; }
.nav .menu:hover .alt, .nav .menu:focus-within .alt, .nav .menu.acik .alt { display: block; }
.nav .alt a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: #16385a; white-space: nowrap; }
.nav .alt a:hover { background: #f6f8fb; color: #d19b00; }

/* ---------------------------------------------------------------- ana sayfa kahraman zemini
   Üst barın ve ilk bölümlerin arkasında dalgalı görsel; alta doğru sayfa zeminine erir (mask).
   Yalnızca body.ana-sayfa'da: üst bar şeffaf olur, içerik katmanın üstünde kalır. */
body.ana-sayfa .page { position: relative; }
body.ana-sayfa header { background: transparent; }
body.ana-sayfa main { position: relative; z-index: 1; }
.kahraman-zemin { position: absolute; left: 0; right: 0; top: 0; height: min(1120px, 150vw); z-index: 0; pointer-events: none;
  background: #f7f8fb center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
/* Kartlar zeminin üstünde biraz daha belirgin dursun */
body.ana-sayfa .card, body.ana-sayfa .featbar { box-shadow: 0 6px 24px rgba(18,54,90,.08); }
@media (max-width: 760px) { .kahraman-zemin { height: min(1500px, 260vw); } }

/* ---------------------------------------------------------------- tipografi */
h1 { margin: 0; font-size: clamp(22px, 2.4vw, 29px); font-weight: 700; line-height: 1.45; letter-spacing: -.2px; color: #16385a; }
.spark-l { position: absolute; left: -22px; top: 4px; width: 16px; height: 16px; border-left: 3px solid #f5b301; border-top: 3px solid #f5b301; transform: rotate(-20deg); border-radius: 2px; }
.spark-r { position: absolute; right: -20px; top: -2px; width: 13px; height: 13px; border-right: 3px solid #f5b301; border-top: 3px solid #f5b301; transform: rotate(22deg); border-radius: 2px; }

/* ---------------------------------------------------------------- ürün kartları */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.card { background: #fff; border: 1px solid #eef0f3; border-radius: 13px; box-shadow: 0 2px 10px rgba(18,54,90,.05); padding: 12px 12px 20px; display: flex; flex-direction: column; align-items: center; }
.card img { width: 100%; height: 108px; object-fit: contain; display: block; }
.card h2, .card h3 { font-size: 15.5px; font-weight: 700; color: #16385a; margin: 10px 0 0; text-align: center; }
/* Kontrast: #7e8c9a beyazda 3,4:1 idi (WCAG 4,5:1 ister); #5c6a78 aynı gri-mavi ton, 5,5:1. */
.card p { font-size: 12px; color: #5c6a78; line-height: 1.75; text-align: center; margin: 6px 0 0; text-wrap: pretty; }
/* Altın yazı #d19b00 beyazda 2,5:1; #946d00 aynı ailede 4,7:1. Çerçeve rengi korunur. */
.ghost { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 116px; padding: 9px 0; border: 1.5px solid #f2c65c; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: #946d00; }
.ghost:hover { background: #fff8e6; }

/* ---------------------------------------------------------------- özellik şeridi */
.featbar { background: #fff; border: 1px solid #eef0f3; border-radius: 13px; box-shadow: 0 2px 10px rgba(18,54,90,.05); display: grid; grid-template-columns: repeat(4,1fr); padding: 16px 0; }
.feat { display: flex; align-items: center; gap: 12px; padding: 4px 22px; border-left: 1px solid #eef0f3; }
/* İkonlar vektör (SVG) olduğu için karıştırma kipine gerek yok; her ölçüde net. */
.feat img { width: 30px; height: 30px; display: block; flex: none; }
.feat b { font-size: 12.5px; font-weight: 700; color: #16385a; display: block; }
.feat span { font-size: 11.5px; color: #5c6a78; }   /* #8593a1 beyazda 3,4:1 idi; 5,5:1 */

/* ---------------------------------------------------------------- kampanya galerisi */
.arrow-btn { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid #e7eaef; box-shadow: 0 2px 8px rgba(18,54,90,.08); color: #16385a; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.arrow-btn:hover { background: #f4f6f9; }
.galeri { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.galeri-pencere { flex: 1; min-width: 0; overflow: hidden; }
.track { display: flex; gap: 10px; transition: transform 420ms cubic-bezier(.4,0,.2,1); }
/* Kartlar sabit genişlikte değil: pencereyi tam dolduracak biçimde 4'e bölünür. */
.kampanya { flex: 0 0 calc((100% - 30px) / 4); display: block; border-radius: 11px; overflow: hidden;
  box-shadow: 0 3px 12px rgba(18,54,90,.1); background: #f1f4f8; }
.kampanya img { width: 100%; height: auto; aspect-ratio: 420 / 268; object-fit: cover; display: block; }
.galeri-nokta { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 15px; }
.dot { width: 6px; height: 6px; border-radius: 4px; background: #d4dbe3; cursor: pointer; transition: all .24s; }
.dot.on { width: 20px; background: #011a38; }

/* ---------------------------------------------------------------- WhatsApp bandı */
/* Afiş kutusu eski bandın ölçüsündedir (tam genişlik × 250 px). Görsel kırpılmadan
   ortada tam gösterilir; iki yan, afişin lacivertiyle uyumlu degradeyle dolar. */
/* Afiş bandı: görsel tam genişlikte, oranı korunur; bant yüksekliği görselden gelir (kırpma/dolgu yok).
   Bant yüksekliğini kısa tutmak isteyen acente daha yatay bir görsel (ör. 2880×560) yükler. */
.band-afis { display: block; position: relative; border-radius: 15px; overflow: hidden; background: #06214f; box-shadow: 0 10px 30px rgba(1, 26, 56, .18); transition: transform .25s ease, box-shadow .25s ease; }
.band-afis:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(1, 26, 56, .26); }
.band-afis picture, .band-afis img { position: relative; z-index: 1; }
.band-afis img { display: block; width: 100%; height: auto; }
.band { background: #011a38; border-radius: 15px; display: flex; align-items: center; gap: 20px; padding: 18px 26px 18px 16px; }
.band .gorsel { width: 360px; height: 187px; object-fit: contain; display: block; flex: none; }
.band h2 { margin: 0; font-size: clamp(17px, 1.7vw, 20px); font-weight: 600; color: #fff; line-height: 1.45; }
.band .accent { font-size: clamp(17px, 1.7vw, 20px); font-weight: 700; color: #f5b301; margin-top: 4px; }
.band .orta-sut { flex: 1; min-width: 0; }
.band .sag-sut { flex: none; width: 200px; display: flex; flex-direction: column; align-items: center; padding-top: 24px; }
.chk { display: flex; align-items: center; gap: 10px; }
.chk i { width: 15px; height: 15px; border-radius: 4px; background: rgba(255,255,255,.14); color: #fff; font-size: 9px; display: flex; align-items: center; justify-content: center; flex: none; font-style: normal; }
.chk span { font-size: 12.5px; color: #dfe6ee; }
.wa-btn { margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 11px; background: #25d366; color: #fff; font-size: 14px; font-weight: 600; padding: 14px 16px; border-radius: 999px; width: 100%; box-shadow: 0 6px 18px rgba(37,211,102,.3); }
.wa-btn:hover { background: #1fbe5b; }

/* ---------------------------------------------------------------- arı maskotu
   Sayfanın TAMAMINDA imleci izler; boşta kalınca eylem düğmelerine gider.
   Katmanın tamamı pointer-events:none — hiçbir tıklamayı engellemez.
   Alt menülerin (z-index 60) üstünde, ama sabit üst çubuğun akışını bozmadan. */
.ari-katman { position: fixed; inset: 0; z-index: 90; pointer-events: none;
  overflow: hidden; contain: layout style; }

.ari { position: absolute; left: 0; top: 0; width: 54px; height: 59px;
  margin: -30px 0 0 -27px; opacity: 0; transition: opacity .32s ease;
  will-change: transform; filter: drop-shadow(0 5px 11px rgba(18,54,90,.24)); }
.ari.acik { opacity: 1; }
/* Uzun süre hareketsiz kalındığında okumayı bölmesin diye soluklaşır. */
.ari.sakin { opacity: .42; }

/* Arı yerine konup durduğunda kanatlar da durur: hem gerçekçi, hem de
   WCAG 2.2.2 gereği hareket kendiliğinden sona ermiş olur. Satır içi gömülü
   SVG'de bu seçici içerideki parçalara ulaşır. */
.ari.durgun .ari-kanat, .ari.durgun .ari-govde, .ari.durgun .ari-antenler {
  animation-play-state: paused;
}

/* Arının üstünde durduğu eylem düğmesi hafifçe parlar.
   Halka `outline` ile çizilir: ::after kullanılsaydı .cta ve .wa-btn üzerindeki
   mevcut ::after süslemeleriyle çakışır, overflow:hidden olan düğmelerde de kırpılırdı.
   outline taşmaz, kırpılmaz ve köşe yarıçapını izler. Halka KESİKLİ çizilir:
   klavye odak halkası her zaman düz çizgidir, arının süsü onunla karışmasın diye. */
.ari-vurgu {
  outline: 2px dashed rgba(245,179,1,.85);
  outline-offset: 4px;
  transition: outline-color .3s ease, outline-offset .3s ease;
}
/* Odaktaki öğeye asla ikinci halka basılmaz. */
.ari-vurgu:focus-visible { outline-style: solid; }

/* Arı çalışmayan ortamlarda halka da hiç görünmemeli. */
@media (max-width: 980px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .ari-vurgu { outline: none; }
}
.ari .ari-gorsel { width: 100%; height: 100%; display: block; overflow: visible; object-fit: contain; }

/* Kanat çırpma hızını JS sürer: hızlandıkça --cirp küçülür. */
.ari .ari-gorsel .ari-kanat { animation-duration: var(--cirp, .13s); }

/* Arkada bıraktığı polen taneleri (havuzdan yeniden kullanılır).
   will-change verilmez: taneler çoğu zaman ölüdür, sürekli kompozitör katmanı
   ayırmak boşa bellek olurdu; yazılan translate3d zaten katmana alır. */
.polen { position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 34% 32%, #ffe9a8, #f5b301 62%, rgba(245,179,1,0)); }

/* Tıklamada patlayan altın kıvılcımlar */
.kivilcim { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: #f5b301; opacity: 0; }

/* ---------------------------------------------------------------- yerleşik süs arıları
   Sayfanın seçilmiş noktalarında, kendi küçük yörüngelerinde süzülen arılar.
   İmleci izlemezler, sayfayı dolaşmazlar; bulundukları bölümle birlikte kayarlar.
   Tamamen CSS — JavaScript yok, döngü yok, tıklamaya karışmaz. */
.ari-yuva { position: relative; }

.ari-sus { position: absolute; display: block; pointer-events: none; z-index: 3;
  width: 46px; --cirp: .16s;
  filter: drop-shadow(0 5px 10px rgba(18,54,90,.2)); }
.ari-sus .ari-gorsel { width: 100%; height: auto; display: block; overflow: visible; }
svg.sus-yuva { aspect-ratio: 1; }
.ari-sus:has(.sus-yuva) { width: 34px; }

/* Üç ayrı yörünge: aynı anda görünen arılar birbirinin kopyası gibi durmasın. */
.ari-sus-a { animation: ariSusA 3.6s ease-in-out infinite; }
@keyframes ariSusA {
  0%, 100% { transform: translate(0, 0) rotate(-4deg); }
  50%      { transform: translate(3px, -11px) rotate(4deg); }
}

.ari-sus-b { animation: ariSusB 6.4s ease-in-out infinite; }
@keyframes ariSusB {
  0%, 100% { transform: translate(0, 0) rotate(-5deg); }
  25%      { transform: translate(13px, -8px) rotate(6deg); }
  50%      { transform: translate(2px, -14px) rotate(-2deg); }
  75%      { transform: translate(-11px, -7px) rotate(-8deg); }
}

.ari-sus-c { animation: ariSusC 5.2s ease-in-out infinite; }
@keyframes ariSusC {
  0%, 100% { transform: translate(0, 0) rotate(5deg) scaleX(-1); }
  33%      { transform: translate(-9px, -6px) rotate(-3deg) scaleX(-1); }
  66%      { transform: translate(6px, -12px) rotate(8deg) scaleX(-1); }
}

/* --- yerleşim noktaları ---
   Arılar boşlukta durmaz; hep bir tasarım öğesine bağlanır. Başlıkların altındaki
   altın çizgi "dal" gibi kullanılır: arı onun ucuna konar. Her arıya farklı bir
   animasyon gecikmesi verilir, aksi hâlde hepsi aynı anda aynı yöne süzülürdü. */

/* Başlık bloğunun sağında, altın çizgiyle aynı hizada: metnin üstüne binmez,
   başlığın devamı gibi durur. `left:100%` blok ne kadar genişse oraya yapışır. */
.ari-sus-kahraman { bottom: -4px; left: 100%; margin-left: 18px; width: 46px; }

/* İç sayfa başlığında aynı dil. */
.ari-sus-sayfa    { bottom: -4px; left: 100%; margin-left: 16px; width: 40px; animation-delay: -0.8s; }

/* Bantta kesikli okun başlangıcında: WhatsApp düğmesine doğru uçuyormuş gibi. */
.ari-sus-band     { top: 30px; right: 190px; width: 42px; animation-delay: -2.1s; }

/* İş ortakları başlığının altında, logo şeridine iniyormuş gibi. */
.ari-sus-ortak    { top: 22px; right: -50px; width: 38px; animation-delay: -3.4s; }

/* Kampanya başlığındaki altın kıvılcımın yanında. */
.ari-sus-kampanya { top: -26px; right: -46px; width: 36px; animation-delay: -1.2s; }

/* .band doğrudan çocuklarına position:relative veriyor; süs arısı bundan muaf. */
.band > .ari-sus { position: absolute; }

@media (max-width: 980px) {
  /* Bant dikey yığıldığında ok gizleniyor; arı köşeye dönebilir. */
  .ari-sus-band { top: 10px; right: 14px; width: 36px; }
}
@media (max-width: 620px) {
  /* Dar ekranda metnin yanında yer kalmıyor; yalnızca bant arısı kalır. */
  .ari-sus-kahraman, .ari-sus-ortak, .ari-sus-kampanya, .ari-sus-sayfa { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ari-sus-a, .ari-sus-b, .ari-sus-c { animation: none; }
  .nav, .nav.acik, .nav-perde, html.menu-acik .nav-perde, .nav .menu > a .caret { transition: none; }
}

/* Kendi başına dolaşan gezgin arı: imleç arısından biraz küçük ve daha yumuşak,
   böylece ikisi aynı anda görününce hangisinin imleci izlediği karışmaz. */
.ari-gezgin { width: 42px; height: 46px; margin: -23px 0 0 -21px;
  filter: drop-shadow(0 4px 9px rgba(18,54,90,.18)); }
.ari-gezgin.acik { opacity: .9; }

/* Dar ekran ve hareket azaltma tercihinde arı katmanı hiç çalışmaz.
   `pointer: coarse` burada kapı DEĞİLDİR: gezgin arının fareye ihtiyacı yok,
   büyük dokunmatik ekranlarda da uçabilir. İmleci izleyen arı JS tarafında
   ayrıca `pointer: fine` ile sınırlanır. */
@media (max-width: 980px) { .ari-katman { display: none; } }
@media (prefers-reduced-motion: reduce) { .ari-katman { display: none; } }

/* ---------------------------------------------------------------- hareketi durdurma
   Kendiliğinden başlayan ve süresiz devam eden hareket için zorunlu denetim
   (WCAG 2.2.2). Tercih tarayıcıda saklanır. */
.hareket-dug { background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; color: inherit; text-decoration: underline;
  text-underline-offset: 3px; opacity: .85; }
.hareket-dug:hover { opacity: 1; color: #f5b301; }
.hareket-dug:focus-visible { outline: 2px solid #f5b301; outline-offset: 3px; border-radius: 3px; }

html.hareketsiz .ari-katman { display: none !important; }
html.hareketsiz .cta::after,
html.hareketsiz .wa-btn::before,
html.hareketsiz .spark-l, html.hareketsiz .spark-r,
html.hareketsiz .band::before,
html.hareketsiz .band .gorsel,
html.hareketsiz .ortak-ray,
html.hareketsiz .ari-sus,
html.hareketsiz .ari-sus .ari-kanat,
html.hareketsiz .ari-sus .ari-govde,
html.hareketsiz .ari-sus .ari-antenler { animation: none !important; }
html.hareketsiz .beliren { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---------------------------------------------------------------- iş ortakları */
.ortak-serit { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 14px; max-width: 1100px; margin: 0 auto; }

/* Kesintisiz kayan logo şeridi.
   Ray iki özdeş gruptan oluşur; bir grup + bir boşluk kadar kaydırınca
   ikinci grup birincinin yerine oturur ve döngü görünmez biçimde başa döner. */
.ortak-slider { overflow: hidden; padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ortak-ray { display: flex; gap: 14px; width: max-content; animation: ortakKay 45s linear infinite; }
.ortak-grup { display: flex; gap: 14px; }
.ortak-slider:hover .ortak-ray, .ortak-slider:focus-within .ortak-ray { animation-play-state: paused; }
@keyframes ortakKay { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }

/* Hareketi azaltma tercihi: animasyon durur, şerit elle kaydırılabilir kalır. */
@media (prefers-reduced-motion: reduce) {
  .ortak-ray { animation: none; }
  .ortak-slider { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .ortak-grup:nth-child(2) { display: none; }
}
.ortak { display: flex; align-items: center; justify-content: center; min-width: 132px; height: 62px;
  padding: 10px 16px; background: #fff; border: 1px solid #eef0f3; border-radius: 11px;
  box-shadow: 0 2px 8px rgba(18,54,90,.05); transition: box-shadow .18s, transform .18s; }
a.ortak:hover { box-shadow: 0 6px 16px rgba(18,54,90,.12); transform: translateY(-2px); }
.ortak img { max-width: 132px; max-height: 40px; width: auto; height: auto; display: block;
  object-fit: contain; mix-blend-mode: multiply; }
.ortak .ortak-ad { font-size: 12.5px; font-weight: 700; color: #16385a; text-align: center; line-height: 1.35; }

/* ---------------------------------------------------------------- alt bilgi */
footer { background: #011a38; color: #fff; }
/* Koyu logolar lacivert zeminde kaybolmasın diye beyaz yuva.
   Zemini şeffaf logoda bu yuva temiz görünür; şeffaf olmayan dosyada logonun kendi
   gri zemini yuvanın içinde ikinci bir kutu gibi durur — bu yüzden panelden
   "Mevcut logoyu yeniden işle" adımı önerilir. */
.dip-marka { display: inline-flex; align-items: center; background: #fff;
  border-radius: 10px; padding: 8px 12px; }
.dip-marka img { mix-blend-mode: multiply; height: auto; max-width: 100%; }
footer .dip-ic { padding-top: 30px; }
footer .cols { display: grid; grid-template-columns: 210px repeat(3, minmax(130px, 1fr)) minmax(240px, 1.2fr); gap: 20px; }
footer h3, footer h4 { margin: 0 0 13px; font-size: 13.5px; font-weight: 600; }
footer .links { display: flex; flex-direction: column; gap: 8px; }
footer .links a { font-size: 12.5px; color: #b9c6d4; }
footer .links a:hover, .legal a:hover { color: #f5b301; }
.legal { margin-top: 26px; border-top: 1px solid rgba(255,255,255,.1); padding: 16px 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: #a9b8c8; }

/* ================================================================
   İç sayfa bileşenleri
   ================================================================ */
.sayfa-bas { padding-top: 30px; }
.sayfa-bas .yol { font-size: 11.5px; color: #8593a1; margin-bottom: 10px; }
.sayfa-bas .yol a:hover { color: #d19b00; }
.sayfa-bas h1 { font-size: clamp(21px, 2.2vw, 25px); }
.sayfa-bas .cizgi { width: 96px; height: 3px; background: #f5b301; border-radius: 3px; margin-top: 8px; }
.bolum { padding-top: 22px; }
.bolum-son { padding-bottom: 34px; }

.kutu { background: #fff; border: 1px solid #eef0f3; border-radius: 13px; box-shadow: 0 2px 10px rgba(18,54,90,.05); padding: 22px 24px; }
.kutu-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.kutu-bas h2 { margin: 0; font-size: 17px; font-weight: 700; color: #16385a; }
.kutu-bas .yan { font-size: 12px; color: #8593a1; }
.yazi { font-size: 13.5px; line-height: 1.9; color: #4a6076; }
.yazi h2 { font-size: 17px; color: #16385a; margin: 22px 0 8px; }
.yazi h3 { font-size: 15px; color: #16385a; margin: 18px 0 6px; }
.yazi p { margin: 0 0 12px; }
.yazi ul { margin: 0 0 12px; padding-left: 20px; }
.yazi li { margin-bottom: 6px; }
.yazi a { color: #d19b00; font-weight: 600; }

/* düğmeler */
.dug { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .3px; padding: 13px 22px; border-radius: 11px;
  background: #011a38; color: #fff; transition: background .2s; }
.dug:hover { background: #123457; }
.dug.altin { background: #f5b301; color: #16385a; }
.dug.altin:hover { background: #e0a400; }
.dug.hayalet { background: #fff; color: #d19b00; border: 1.5px solid #f2c65c; }
.dug.hayalet:hover { background: #fff8e6; }
.dug.sade { background: #f4f6f9; color: #16385a; }
.dug.sade:hover { background: #e9edf3; }
.dug.kucuk { font-size: 12px; padding: 9px 15px; border-radius: 9px; }
.dug.tam { width: 100%; }
.dug.yesil { background: #25d366; }
.dug.yesil:hover { background: #1fbe5b; }

/* form alanları */
.form-satir { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.form-satir.uc { grid-template-columns: repeat(3, 1fr); }
.form-satir.tek { grid-template-columns: 1fr; }
.alan { display: block; margin-bottom: 14px; }
.alan > span { display: block; font-size: 12px; font-weight: 600; color: #16385a; margin-bottom: 6px; }
.alan > span .zorunlu { color: #e0533d; }
.alan input[type=text], .alan input[type=email], .alan input[type=tel], .alan input[type=date],
.alan input[type=number], .alan input[type=password], .alan select, .alan textarea {
  width: 100%; font-family: inherit; font-size: 13px; color: #16385a; background: #fff;
  border: 1px solid #e2e7ee; border-radius: 10px; padding: 12px 13px; outline: none; transition: border-color .18s, box-shadow .18s; }
.alan textarea { min-height: 108px; resize: vertical; line-height: 1.7; }
.alan input:focus, .alan select:focus, .alan textarea:focus { border-color: #f5b301; box-shadow: 0 0 0 3px rgba(245,179,1,.14); }
.alan input[type=file] { width: 100%; font-family: inherit; font-size: 12.5px; color: #4a6076; background: #f8fafc;
  border: 1.5px dashed #dbe2ea; border-radius: 10px; padding: 14px; cursor: pointer; }
.alan .ipucu { display: block; font-size: 11px; color: #8593a1; margin-top: 5px; font-weight: 400; }
.onay { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: #4a6076; line-height: 1.6; margin-bottom: 14px; }
.onay input { margin-top: 2px; accent-color: #f5b301; }

/* uyarı kutuları */
.uyari { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.65; padding: 13px 15px;
  border-radius: 11px; margin-bottom: 16px; border: 1px solid transparent; }
.uyari.basari { background: #eafaf1; border-color: #bfe9d2; color: #1c7a48; }
.uyari.hata   { background: #fdeeeb; border-color: #f6cfc7; color: #b5432c; }
.uyari.bilgi  { background: #eef4fd; border-color: #cfe0f7; color: #1f4f8f; }
.uyari.uyari  { background: #fff8e6; border-color: #f6e0a8; color: #8a6100; }
.uyari b { font-weight: 700; }

/* rozetler */
.rozet { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.rozet.mavi    { background: #eef4fd; color: #1f4f8f; }
.rozet.yesil   { background: #eafaf1; color: #1c7a48; }
.rozet.sari    { background: #fff6e0; color: #8a6100; }
.rozet.kirmizi { background: #fdeeeb; color: #b5432c; }
.rozet.gri     { background: #f1f4f8; color: #67788a; }

/* tablolar */
.tablo-sar { overflow-x: auto; border: 1px solid #eef0f3; border-radius: 13px; background: #fff; }
table.tablo { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tablo th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: #8593a1; background: #f8fafc; padding: 12px 14px; border-bottom: 1px solid #eef0f3; white-space: nowrap; }
table.tablo td { padding: 13px 14px; border-bottom: 1px solid #f2f5f8; color: #16385a; vertical-align: middle; }
table.tablo tr:last-child td { border-bottom: none; }
table.tablo tbody tr:hover { background: #fbfcfe; }
table.tablo td.daralt { width: 1%; white-space: nowrap; }
table.tablo .ana { font-weight: 700; }
table.tablo .alt { font-size: 11px; color: #8593a1; margin-top: 2px; }
.bos { text-align: center; padding: 42px 20px; color: #8593a1; font-size: 13px; }
.bos b { display: block; color: #16385a; font-size: 14.5px; margin-bottom: 6px; }

/* sayfalama */
.sayfalama { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 20px; flex-wrap: wrap; }
.sayfalama a, .sayfalama span { min-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  padding: 0 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: #16385a; background: #fff; border: 1px solid #e7eaef; }
.sayfalama a:hover { background: #f4f6f9; }
.sayfalama .aktif { background: #011a38; border-color: #011a38; color: #fff; }

/* istatistik kutuları */
.ist-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.ist { background: #fff; border: 1px solid #eef0f3; border-radius: 13px; box-shadow: 0 2px 10px rgba(18,54,90,.05); padding: 16px 18px; }
.ist .sayi { font-size: 24px; font-weight: 700; color: #16385a; line-height: 1.2; }
.ist .ad { font-size: 11.5px; color: #8593a1; margin-top: 3px; }
.ist .cizgi { width: 30px; height: 3px; border-radius: 3px; background: #f5b301; margin-top: 10px; }

/* müşteri paneli */
.panel-duzen { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 16px; }
.panel-duzen > * { min-width: 0; }
.panel-yan { background: #fff; border: 1px solid #eef0f3; border-radius: 13px; box-shadow: 0 2px 10px rgba(18,54,90,.05); padding: 16px; height: fit-content; }
.panel-yan .kim { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid #f2f5f8; margin-bottom: 12px; }
.panel-yan .avatar { width: 38px; height: 38px; border-radius: 50%; background: #011a38; color: #f5b301; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex: none; }
.panel-yan .kim b { display: block; font-size: 13px; color: #16385a; line-height: 1.3; }
.panel-yan .kim span { font-size: 11px; color: #8593a1; }
.panel-menu { display: flex; flex-direction: column; gap: 3px; }
.panel-menu a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 9px;
  font-size: 12.5px; font-weight: 500; color: #4a6076; }
.panel-menu a:hover { background: #f6f8fb; color: #16385a; }
.panel-menu a.aktif { background: #011a38; color: #fff; font-weight: 600; }
.panel-menu a.aktif .adet { background: #f5b301; color: #16385a; }
.panel-menu .adet { background: #f1f4f8; color: #67788a; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.panel-menu .cik { margin-top: 8px; border-top: 1px solid #f2f5f8; padding-top: 12px; color: #b5432c; }
.panel-menu .cik:hover { background: #fdeeeb; color: #b5432c; }

/* giriş ekranı */
.giris-sar { padding-top: 44px; padding-bottom: 54px; display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 34px; align-items: center; }
.giris-sol h1 { font-size: clamp(21px, 2.3vw, 26px); }
.giris-sol .cizgi { width: 96px; height: 3px; background: #f5b301; border-radius: 3px; margin: 10px 0 18px; }
.giris-sol .madde { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 13px; color: #4a6076; line-height: 1.6; }
.giris-sol .madde i { width: 18px; height: 18px; border-radius: 5px; background: #fff6e0; color: #d19b00; font-size: 10px; font-style: normal;
  display: flex; align-items: center; justify-content: center; flex: none; margin-top: 2px; }

/* giriş / üye ol sekmeleri */
.sekme-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #f4f6f9;
  border-radius: 11px; padding: 4px; margin-bottom: 18px; }
.sekme-ikili > * { text-align: center; padding: 10px 8px; border-radius: 8px; font-size: 13px;
  font-weight: 600; color: #67788a; }
.sekme-ikili > a:hover { color: #16385a; }
.sekme-ikili > .aktif { background: #fff; color: #16385a; box-shadow: 0 1px 4px rgba(18,54,90,.1); }

/* detay ikili sütun */
.iki-sutun { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 16px; align-items: start; }
.veri-liste { display: flex; flex-direction: column; }
.veri-liste div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid #f2f5f8; font-size: 12.5px; }
.veri-liste div:last-child { border-bottom: none; }
.veri-liste dt, .veri-liste .ad { color: #8593a1; }
.veri-liste .deg { font-weight: 600; color: #16385a; text-align: right; }

/* mesajlaşma */
.mesaj { padding: 13px 15px; border-radius: 11px; margin-bottom: 10px; font-size: 12.5px; line-height: 1.7; }
.mesaj .kim { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; margin-bottom: 6px; }
.mesaj.bizden { background: #f6f8fb; border: 1px solid #eef0f3; }
.mesaj.bizden .kim { color: #8593a1; }
.mesaj.bizden .kim b { color: #16385a; }
.mesaj.karsi { background: #011a38; color: #dfe6ee; }
.mesaj.karsi .kim { color: #93a7bd; }
.mesaj.karsi .kim b { color: #f5b301; }

/* ürün detay */
.urun-bas { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 24px; align-items: center; }
/* Kaynak görsel 436×216; 176 px yükseklikte neredeyse 1:1'e düşüp yumuşuyordu. */
.urun-bas img { grid-column: 1; grid-row: 1; width: 100%; max-width: 218px; height: 140px; object-fit: contain; display: block; margin: 0 auto; }
.urun-bas > div { grid-column: 2; grid-row: 1; min-width: 0; }
.urun-bas h1 { font-size: clamp(21px, 2.2vw, 25px); }
.urun-bas .cizgi { width: 96px; height: 3px; background: #f5b301; border-radius: 3px; margin: 8px 0 12px; }
.urun-bas p { font-size: 13.5px; color: #7e8c9a; line-height: 1.8; margin: 0 0 18px; }
.urun-bas .dugmeler { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* blog kartları — kapak görselleri 420 px genişliğinde olduğu için kart bundan
   geniş olmasın diye sütun sayısı otomatik artar (aksi halde kapak büyütülüp bulanıklaşır). */
.yazi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.yazi-kart { background: #fff; border: 1px solid #eef0f3; border-radius: 13px; box-shadow: 0 2px 10px rgba(18,54,90,.05); overflow: hidden; display: flex; flex-direction: column; }
.yazi-kart .kapak { width: 100%; height: 142px; object-fit: cover; display: block; background: #f1f4f8; }
.yazi-kart .ic { padding: 14px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.yazi-kart .etiket { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #946d00; margin-bottom: 7px; }
.yazi-kart h2, .yazi-kart h3 { margin: 0 0 7px; font-size: 14.5px; font-weight: 700; color: #16385a; line-height: 1.45; }
.yazi-kart p { margin: 0 0 14px; font-size: 12px; color: #5c6a78; line-height: 1.75; flex: 1; }
.yazi-kart .alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; color: #5c6a78; }
.yazi-kart .alt a { color: #946d00; font-weight: 600; }

/* S.S.S. */
.sss { border: 1px solid #eef0f3; border-radius: 12px; background: #fff; margin-bottom: 9px; overflow: hidden; }
.sss summary { list-style: none; cursor: pointer; padding: 15px 18px; font-size: 13.5px; font-weight: 600; color: #16385a;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: '+'; color: #d19b00; font-size: 17px; font-weight: 700; flex: none; }
.sss[open] summary::after { content: '−'; }
.sss[open] summary { border-bottom: 1px solid #f2f5f8; }
.sss .cevap { padding: 14px 18px 18px; font-size: 13px; color: #4a6076; line-height: 1.85; }

/* iletişim */
.iletisim-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 16px; align-items: start; }
.iletisim-kart { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid #f2f5f8; }
.iletisim-kart:last-child { border-bottom: none; }
.iletisim-kart i { width: 36px; height: 36px; border-radius: 10px; background: #fff6e0; color: #d19b00; font-style: normal;
  display: flex; align-items: center; justify-content: center; flex: none; }
.iletisim-kart i svg { display: block; }
.iletisim-kart b { display: block; font-size: 12.5px; color: #16385a; margin-bottom: 2px; }
.iletisim-kart span { font-size: 12px; color: #8593a1; line-height: 1.6; }

/* adım göstergesi */
.adimlar { display: flex; align-items: center; gap: 0; margin-bottom: 20px; }
.adim { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #8593a1; white-space: nowrap; }
.adim i { width: 24px; height: 24px; border-radius: 50%; background: #f1f4f8; color: #8593a1; font-style: normal;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.adim.aktif { color: #16385a; font-weight: 600; }
.adim.aktif i { background: #f5b301; color: #16385a; }
.adim-ara { flex: 1; height: 1px; background: #e7eaef; margin: 0 12px; min-width: 10px; }

/* yardımcı sınıflar */
.orta { text-align: center; }
.sag { text-align: right; }
.gri { color: #8593a1; }
.kucuk { font-size: 11.5px; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.arac-cubugu { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.arac-cubugu form { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0; }
.arac-cubugu input, .arac-cubugu select { font-family: inherit; font-size: 12.5px; color: #16385a; background: #fff;
  border: 1px solid #e2e7ee; border-radius: 9px; padding: 9px 12px; outline: none; }
.arac-cubugu input:focus, .arac-cubugu select:focus { border-color: #f5b301; }
.arac-cubugu .sag-it { margin-left: auto; }
.dug-grup { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }

/* ================================================================
   Hareket ve vurgu katmanı
   Sitenin dilini değiştirmez; mevcut bileşenlere canlılık ekler.
   Tamamı `html.hareket` sınıfına bağlıdır — bu sınıfı JavaScript koyar,
   böylece betik çalışmazsa hiçbir içerik gizli kalmaz.
   ================================================================ */

/* ---------------------------------------------------------------- kaydırınca beliren bölümler
   Tek tip bir "aşağıdan yukarı" beliriş sıkıcı duruyordu. Aynı gözcü (duzen.php)
   `.gorundu` sınıfını basar; buradaki çeşitler her bölüme farklı bir giriş verir.
   Hepsi yalnızca transform + opacity kullanır, yani kompozitörde çalışır. */
.hareket .beliren { opacity: 0; transform: translateY(28px); }
.hareket .beliren.gorundu { opacity: 1; transform: none; }
.hareket .beliren {
  transition: opacity .72s cubic-bezier(.22,.8,.3,1) var(--gecikme, 0ms),
              transform .72s cubic-bezier(.22,.8,.3,1) var(--gecikme, 0ms);
}

/* Yalnızca solar — kapsayıcı kutular için; içindeki öğeler ayrı hareket eder. */
.hareket .beliren.beliren-sade { transform: none; }

/* Soldan/sağdan kayarak girer. `.page { overflow-x: hidden }` taşmayı keser. */
.hareket .beliren.beliren-sol { transform: translateX(-42px); }
.hareket .beliren.beliren-sag { transform: translateX(52px); }
.hareket .beliren.beliren-sol.gorundu,
.hareket .beliren.beliren-sag.gorundu { transform: none; }

/* Uzaktan yaklaşır — geniş bloklar (bant, logo şeridi) için. */
.hareket .beliren.beliren-yakin { transform: scale(.94) translateY(20px); }
.hareket .beliren.beliren-yakin.gorundu { transform: none; }

/* Kart destesi gibi devrilerek doğrulur; en belirgin geçiş bu. */
.hareket .beliren.beliren-cevir {
  transform: perspective(760px) rotateX(15deg) translateY(34px);
  transform-origin: 50% 100%;
}
.hareket .beliren.beliren-cevir.gorundu { transform: none; }

/* Altın çizgi soldan sağa çizilir; başlık altındaki vurgu böylece "yazılıyor" gibi olur. */
.hareket .beliren.beliren-cizgi {
  opacity: 1; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .78s cubic-bezier(.22,.8,.3,1) var(--gecikme, 0ms);
}
.hareket .beliren.beliren-cizgi.gorundu { transform: scaleX(1); }

/* ---------------------------------------------------------------- ürün kartları */
.card { transition: transform .32s cubic-bezier(.22,.8,.3,1), box-shadow .32s ease, border-color .32s ease; }
/* Özgüllük, beliriş kuralıyla eşitlenir: `.hareket .beliren.gorundu` (0,3,0)
   sade `.card:hover` (0,2,0) kuralını yenip kalkmayı öldürüyordu. */
.card:hover,
.hareket .card.beliren.gorundu:hover { transform: translateY(-7px); border-color: #f6dfa4;
  box-shadow: 0 16px 34px rgba(18,54,90,.13); }
.card img { transition: transform .45s cubic-bezier(.22,.8,.3,1); }
.card:hover img { transform: scale(1.07) rotate(-1.6deg); }
.ghost { transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; }
.card:hover .ghost { background: #f5b301; border-color: #f5b301; color: #16385a; transform: translateY(-1px); }

/* ---------------------------------------------------------------- özellik şeridi */
.feat img { transition: transform .3s ease; }
.feat:hover img { animation: ariSalla .62s ease; }
@keyframes ariSalla {
  0%, 100% { transform: rotate(0) scale(1); }
  25%      { transform: rotate(-11deg) scale(1.1); }
  75%      { transform: rotate(11deg) scale(1.1); }
}

/* ---------------------------------------------------------------- üst menü alt çizgisi */
.nav > a, .nav .menu > a { position: relative; }
.nav > a::after, .nav .menu > a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -5px; height: 2px;
  background: #f5b301; border-radius: 2px; transition: right .3s cubic-bezier(.22,.8,.3,1);
}
.nav > a:hover::after, .nav .menu:hover > a::after, .nav .menu.acik > a::after { right: 0; }
@media (max-width: 980px) { .nav > a::after, .nav .menu > a::after { display: none; } }

/* ---------------------------------------------------------------- TEKLİF AL düğmesindeki parıltı */
.cta { position: relative; overflow: hidden; transition: transform .25s ease, background .25s ease; }
.cta:hover { transform: translateY(-2px); }
/* Parıltı `left` ile değil `transform` ile kayar: `left` her karede yeniden
   düzen hesabı tetikler, transform doğrudan kompozitörde çalışır. */
.cta::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -55%; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(245,179,1,.42), transparent);
  pointer-events: none;
  animation: ariParilti 5.2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes ariParilti {
  0%, 72%   { transform: translate3d(0, 0, 0) skewX(-18deg); }
  92%, 100% { transform: translate3d(430%, 0, 0) skewX(-18deg); }
}

/* ---------------------------------------------------------------- WhatsApp düğmesi nabzı */
.wa-btn { position: relative; transition: transform .25s ease, background .25s ease; }
.wa-btn:hover { transform: translateY(-2px); }
/* Nabız da transform/opacity ile: genişleyen `box-shadow` her karede yeniden
   boyama gerektiriyordu. */
.wa-btn::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(37,211,102,.55);
  animation: ariNabiz 2.6s ease-out infinite;
}
@keyframes ariNabiz {
  0%        { transform: scale(1);    opacity: .6; }
  70%, 100% { transform: scale(1.13); opacity: 0; }
}

/* ---------------------------------------------------------------- altın kıvılcımlar canlanır */
.spark-l { animation: ariKivilcimSol 3.6s ease-in-out infinite; }
.spark-r { animation: ariKivilcimSag 3.6s ease-in-out infinite .9s; }
@keyframes ariKivilcimSol {
  0%, 100% { opacity: .5;  transform: rotate(-20deg) scale(.88); }
  50%      { opacity: 1;   transform: rotate(-14deg) scale(1.18); }
}
@keyframes ariKivilcimSag {
  0%, 100% { opacity: .5;  transform: rotate(22deg) scale(.88); }
  50%      { opacity: 1;   transform: rotate(28deg) scale(1.18); }
}

/* ---------------------------------------------------------------- WhatsApp bandı: bal peteği dokusu */
.band { position: relative; overflow: hidden; }
.band > * { position: relative; z-index: 1; }
.band::before {
  content: ''; position: absolute; inset: -170px -270px; pointer-events: none; z-index: 0; opacity: .085;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 34.64'%3E%3Cg fill='none' stroke='%23f5b301' stroke-width='1.6'%3E%3Cpath d='M10 17.32 L20 0 L40 0 L50 17.32 L40 34.64 L20 34.64 Z'/%3E%3Cpath d='M-20 0 L-10 -17.32 L10 -17.32 L20 0 L10 17.32 L-10 17.32 Z'/%3E%3Cpath d='M40 0 L50 -17.32 L70 -17.32 L80 0 L70 17.32 L50 17.32 Z'/%3E%3Cpath d='M-20 34.64 L-10 17.32 L10 17.32 L20 34.64 L10 51.96 L-10 51.96 Z'/%3E%3Cpath d='M40 34.64 L50 17.32 L70 17.32 L80 34.64 L70 51.96 L50 51.96 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 34.64px;
  animation: ariPetekKay 34s linear infinite;
}
/* Doku `background-position` yerine transform ile kayar; katman fazladan
   büyütüldüğü için kayma sırasında kenarda boşluk açılmaz. */
@keyframes ariPetekKay {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-240px, -138.56px, 0); }
}
.band .gorsel { animation: ariSuzulGorsel 5.4s ease-in-out infinite alternate; }
@keyframes ariSuzulGorsel {
  from { transform: translateY(-6px); }
  to   { transform: translateY(6px); }
}

/* ---------------------------------------------------------------- iş ortağı logoları */
.ortak { transition: transform .3s cubic-bezier(.22,.8,.3,1), filter .3s ease; }
.ortak:hover { transform: translateY(-5px) scale(1.05); }

/* ---------------------------------------------------------------- yukarı çık düğmesi */
/* Sağ alt köşede sabit durduğu için altındaki tıklama hedeflerini yutabilir.
   Üç önlem: (1) yalnızca kullanıcı YUKARI kaydırırken görünür, aşağı okurken
   ekranda hiç bulunmaz; (2) mobil menü açıkken tamamen kalkar; (3) alt bilgiye
   ek dolgu verilir, böylece hukuki bağlantılar düğmenin üstünde kalır.
   visibility ile de gizlenir: görünmezken klavye sırasına girmemeli. */
.yukari {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 48px; height: 48px; border: none; border-radius: 50%; cursor: pointer;
  background: #011a38; color: #f5b301; font-size: 19px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(1,26,56,.32);
  opacity: 0; transform: translateY(16px) scale(.82);
  pointer-events: none; visibility: hidden;
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,.8,.3,1),
              background .25s ease, visibility 0s .3s;
}
.yukari.gorundu { opacity: 1; transform: none; pointer-events: auto;
  visibility: visible; transition-delay: 0s; }
.yukari:hover { background: #123457; transform: translateY(-3px); }
.yukari:focus-visible { outline: 3px solid #f5b301; outline-offset: 3px; }
html.menu-acik .yukari { display: none; }
/* Alt bilgi dolgusu: kap 1440 px ile sınırlı olduğu için ~1560 px'ten geniş ekranda düğme
   bağlantıların sağında boşlukta durur, dolgu gerekmez; dar ekranda çakışmasın diye kalır. */
footer .dip-ic { padding-bottom: 32px; }
@media (max-width: 1560px) { footer .dip-ic { padding-bottom: 84px; } }
@media (max-width: 760px) {
  .yukari { right: 14px; bottom: 14px; width: 44px; height: 44px; }
  footer .dip-ic { padding-bottom: 72px; }
}

/* Hareket azaltma tercihi: tüm süsleme durur, içerik olduğu gibi görünür. */
@media (prefers-reduced-motion: reduce) {
  .hareket .beliren { opacity: 1; transform: none; transition: none; }
  .cta::after, .cta-wa::before, .wa-btn::before, .spark-l, .spark-r,
  .band::before, .band .gorsel, .feat:hover img { animation: none; }
  .card, .card img, .ortak, .cta, .wa-btn, .yukari { transition: none; }
  .card:hover { transform: none; }
  .card:hover img { transform: none; }
}

/* ================================================================
   Duyarlı kırılma noktaları
   ================================================================ */

/* geniş masaüstü: kartlar fazla büyümesin */
@media (min-width: 1360px) {
  .grid { gap: 14px; }
}

/* küçük masaüstü / büyük tablet */
@media (max-width: 1180px) {
  .band .gorsel { width: 300px; height: 160px; }
  footer .cols { grid-template-columns: 190px repeat(2, minmax(120px, 1fr)) minmax(220px, 1fr); }
  footer .cols > div:nth-child(4) { grid-column: span 1; }
}

@media (max-width: 1080px) {
  .iki-sutun, .iletisim-grid { grid-template-columns: minmax(0, 1fr); }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .kampanya { flex-basis: calc((100% - 20px) / 3); }
}

/* tablet */
@media (max-width: 980px) {
  /* mobil menü: sağdan kayan çekmece
     Kapalıyken ekran dışında ve visibility:hidden (sekme sırasına girmez);
     açılınca perde sayfayı karartır, html.menu-acik kaydırmayı kilitler. */
  .nav-ac { display: block; }
  .tel { margin-left: 12px; }
  .nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-left: 0;
    position: fixed; top: 0; right: 0; bottom: 0; width: min(84vw, 340px); background: #fff;
    box-shadow: -18px 0 44px rgba(6,20,45,.22); z-index: 120; overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(105%); visibility: hidden;
    transition: transform .34s cubic-bezier(.2,.8,.2,1), visibility 0s linear .34s; }
  .nav.acik { transform: none; visibility: visible; transition: transform .34s cubic-bezier(.2,.8,.2,1), visibility 0s; }
  .nav-perde { display: block; position: fixed; inset: 0; background: rgba(6,20,45,.5); z-index: 110;
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
  html.menu-acik .nav-perde { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }
  html.menu-acik { overflow: hidden; }

  .nav-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 14px 12px 18px; border-bottom: 1px solid #eef0f3; }
  .nav-bas img { height: 42px; width: auto; max-width: 70%; object-fit: contain; display: block; }
  .nav-kapat { flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; background: #f4f6f9;
    color: #16385a; font-size: 17px; cursor: pointer; display: grid; place-items: center; }
  .nav-kapat:hover { background: #ffe9a8; }

  .nav > a, .nav .menu > a { padding: 15px 20px; min-height: 54px; border-bottom: 1px solid #f4f6f9;
    font-size: 15px; font-weight: 600; justify-content: space-between; }
  .nav > a.sube { justify-content: flex-start; gap: 10px; }
  .nav .menu { padding-bottom: 0; margin-bottom: 0; }
  .nav .menu > a .caret { font-size: 10px; transition: transform .25s; }
  .nav .menu.acik > a { color: #d19b00; }
  .nav .menu.acik > a .caret { transform: rotate(180deg); }
  /* Alt liste yalnızca grup açıkken; masaüstü :hover kuralı dokunmatikte devreye girmesin */
  .nav .alt, .nav .menu:not(.acik):hover .alt, .nav .menu:not(.acik):focus-within .alt { display: none; }
  .nav .menu.acik .alt { display: block; position: static; box-shadow: none; border: none; border-radius: 0;
    background: #f8fafc; padding: 6px 10px 10px; min-width: 0; }
  .nav .alt a { padding: 11px 14px; font-size: 13.5px; font-weight: 500; color: #34506b; white-space: normal; }
  .nav .alt a:hover { background: #fff; }

  .nav-dip { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding: 18px 18px 22px;
    border-top: 1px solid #eef0f3; }
  .nav-dip .tel-bag { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px;
    border: 1px solid #e3e8ef; border-radius: 11px; font-size: 15px; font-weight: 700; color: #16385a; }
  .nav-dip .tel-bag svg { width: 20px; height: 20px; color: #f0b400; }
  .nav-dip .cta { margin: 0; justify-content: center; }

  .band { flex-direction: column; align-items: stretch; padding: 20px; }
  .band .gorsel { width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
  .band .sag-sut { width: 100%; padding-top: 4px; }
  .band .sag-sut > img { display: none; }

  .giris-sar { grid-template-columns: 1fr; gap: 24px; padding-top: 30px; padding-bottom: 36px; }
  .panel-duzen { grid-template-columns: minmax(0, 1fr); }
  .panel-menu { display: grid; grid-template-columns: repeat(2, 1fr); }
  .urun-bas { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .urun-bas > div { grid-column: 1; grid-row: 2; }
  .urun-bas img { height: 150px; }
  .yazi-grid { grid-template-columns: repeat(2, 1fr); }
  .ist-grid { grid-template-columns: repeat(2, 1fr); }
  .featbar { grid-template-columns: repeat(2, 1fr); gap: 4px 0; }
  footer .cols { grid-template-columns: repeat(2, 1fr); }
  footer .cols > div:first-child { grid-column: 1 / -1; }
}

/* küçük tablet / büyük telefon */
@media (max-width: 760px) {
  /* iOS, 16px altındaki alanlara odaklanınca sayfayı kendiliğinden yakınlaştırır.
     16px vererek bu istenmeyen zoom engellenir. */
  .alan input[type=text], .alan input[type=email], .alan input[type=tel], .alan input[type=date],
  .alan input[type=number], .alan input[type=password], .alan select, .alan textarea,
  .arac-cubugu input, .arac-cubugu select { font-size: 16px; }

  /* Dokunma hedefleri parmak için yeterli yükseklikte olmalı */
  .dug { min-height: 48px; padding: 13px 20px; }
  .dug.kucuk { min-height: 40px; }
  .ghost { width: 100%; min-height: 42px; }
  .panel-menu a { min-height: 44px; }
  .sss summary { min-height: 52px; }
  .sekme-ikili > * { min-height: 46px; display: flex; align-items: center; justify-content: center; }

  .ust-ic { min-height: 48px; }
  /* Paneldeki yükseklik ayarı dar ekranda tavana takılır; genişlik de sınırlanır ki
     geniş bir logo menü düğmesi ve Teklif Al ile çarpışmasın. height:auto + iki üst
     sınır oranı korur (yalnızca max-height verilince logo mobilde küçücük kalıyordu). */
  .ust-ic .marka img { height: auto !important; width: auto; max-height: 60px; max-width: min(58vw, 260px); }
}
@media (max-width: 520px) {
  /* Telefonda satırda logo + menü düğmesi + Teklif Al kalır. Düğme sıkılaşır,
     logo ise onlardan artan genişliği alır (kap dolgusu + düğmeler ≈ 200px). */
  /* "ONLINE TEKLİF AL" + WhatsApp ikonu ~150 px; hamburger ile birlikte ~240 px, logo kalanı alır. */
  .cta { margin-left: 8px; padding: 10px 10px 10px 9px; font-size: 11px; letter-spacing: .1px; gap: 7px; }
  .cta-wa { width: 26px; height: 26px; margin: -3px 0 -3px -2px; }
  .cta-wa svg { width: 15px; height: 15px; }
  .nav-ac { padding: 0 2px; }
  .ust-ic .marka img { max-width: calc(100vw - 240px); }
  .tel .alt { display: none; }
  .tel .no { font-size: 13.5px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .kampanya { flex-basis: calc((100% - 10px) / 2); }
  .form-satir, .form-satir.uc { grid-template-columns: 1fr; }
  .kutu { padding: 18px 16px; }
  .adimlar { display: none; }
  .legal { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* telefon */
@media (max-width: 520px) {
  .tel { display: none; }             /* numara alt bilgide ve iletişim sayfasında zaten var */
  .grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .kampanya { flex-basis: 100%; }
  .card { padding: 10px 10px 16px; }
  .card img { height: 88px; }
  .card h2, .card h3 { font-size: 14px; }
  .ghost { width: 100%; }
  .featbar { grid-template-columns: 1fr; }
  .feat { border-left: none; border-top: 1px solid #eef0f3; padding: 10px 16px; }
  .feat:first-child { border-top: none; }
  .yazi-grid, .ist-grid { grid-template-columns: 1fr; }
  .panel-menu { grid-template-columns: 1fr; }
  footer .cols { grid-template-columns: 1fr; }
  .spark-l, .spark-r { display: none; }   /* dar ekranda taşmasın */
}

@media print {
  header, footer, .panel-yan, .arac-cubugu, .dug { display: none !important; }
  body, .page { background: #fff; }
  /* Süsleme kâğıda basılmaz; belirmemiş bölümler boş çıkmasın diye açılır. */
  .ari-katman, .yukari { display: none !important; }
  .ari-vurgu { outline: none !important; }
  .band::before, .cta::after, .cta-wa::before, .wa-btn::before { display: none !important; }
  .hareket .beliren { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==================================================================
   Mobil duyarlılık — tüm site
   Sihirbaz (trafik/kasko/tss/dask/konut/seyahat), teklif kartları, kasko paketleri,
   poliçe iptal, müşteri paneli. Kırılımlar: 860 (adım şeridi), 700 (kart), 620/520 (telefon).
   ================================================================== */
/* Sayfa hiçbir zaman yatay kaymaz; tablo gibi geniş içerik kendi kabında (.tablo-sar, .tf-tablo-sar) kayar. */
html{overflow-x:hidden}
body{overflow-x:hidden}
.tablo-sar,.tf-tablo-sar{-webkit-overflow-scrolling:touch}

/* Genel iç sayfa ve müşteri paneli */
@media (max-width:760px){
  /* Panel menüsü dikey liste yerine yatay kaydırılabilir sekme şeridi; içerik hemen altında görünür */
  .panel-duzen{gap:12px}
  .panel-yan{padding:12px 12px 8px}
  .panel-yan .kim{padding-bottom:10px;margin-bottom:8px}
  .panel-menu{display:flex;flex-direction:row;flex-wrap:nowrap;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;
              padding-bottom:4px;scrollbar-width:none}
  .panel-menu::-webkit-scrollbar{display:none}
  .panel-menu a{flex:none;white-space:nowrap;padding:9px 12px;min-height:40px;border:1px solid #eef0f3}
  .panel-menu a.aktif{border-color:#011a38}
  .panel-menu .cik{margin:0;border-top:1px solid #eef0f3;padding-top:9px}
  .veri-liste div{flex-wrap:wrap;gap:4px 14px}
  .veri-liste .deg{flex:1;min-width:0;overflow-wrap:anywhere}
}
@media (max-width:520px){
  .ist-grid{grid-template-columns:1fr 1fr;gap:9px}
  .ist{padding:12px 14px}
  .ist .sayi{font-size:20px}
  .kutu-bas h2{font-size:16px}
  .dug-grup{flex-wrap:wrap}
  table.tablo th{padding:10px 10px}
  table.tablo td{padding:11px 10px}
  .arac-cubugu .dug{min-height:40px}
  .sayfa-bas{padding-top:22px}
  .bolum{padding-top:16px}
  .mesaj{padding:11px 12px}
  .iletisim-kart{padding:12px 0}
  .band{padding:16px}
  .wa-btn{font-size:13.5px;padding:13px 14px}
  .legal{font-size:11px}
  footer .dip-ic{padding-top:24px}
}

/* ================================================================
   Canlı sayaç kartı (app/sayac.php, ayar canli_sayac)
   ================================================================ */
.canli-sayac { padding: 20px 0 6px; }
/* Kahramanın hemen altında ince, yatay cam şerit: sayfanın üstünü boğmadan canlılığı gösterir. */
.cs-kart { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 22px;
  border-radius: 18px; padding: 12px 22px; color: #16385a;
  background: linear-gradient(120deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  border: 1px solid rgba(1,26,56,.09); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px -22px rgba(1,26,56,.5); }
.cs-kart::before { content: ""; position: absolute; z-index: -1; right: -120px; top: -150px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,179,1,.18), transparent 66%); }
.cs-rozet { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px; flex: none;
  background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.34); color: #15803d;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; }
.cs-nokta { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex: none; }
.cs-nokta::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #22c55e; animation: csNabiz 1.8s ease-out infinite; }
@keyframes csNabiz { from { transform: scale(1); opacity: .7; } to { transform: scale(2.8); opacity: 0; } }
.cs-izgara { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.cs-oge { display: flex; align-items: center; gap: 10px; padding: 2px 20px; min-width: 0; }
.cs-oge + .cs-oge { border-left: 1px solid rgba(1,26,56,.09); }
.cs-oge.cs-gizli { display: none; }
.cs-ikon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px;
  background: rgba(245,179,1,.14); border: 1px solid rgba(245,179,1,.32); color: #8a6100; transition: transform .3s; }
.cs-ikon svg { width: 18px; height: 18px; }
.cs-vurgu .cs-ikon { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); color: #15803d; }
.cs-veri { display: flex; align-items: baseline; gap: 7px; min-width: 0; flex-wrap: wrap; }
.cs-veri b { font-size: 20px; line-height: 1.1; font-weight: 700; letter-spacing: -.01em; color: #16385a; font-variant-numeric: tabular-nums; }
.cs-etiket { font-size: 12.5px; line-height: 1.3; color: #5d6b7a; }
.cs-oge.cs-degisti .cs-ikon { animation: csVur .9s ease-out; }
@keyframes csVur { 0% { transform: scale(1); } 35% { transform: scale(1.12); box-shadow: 0 0 0 5px rgba(245,179,1,.14); } 100% { transform: scale(1); } }
@media (max-width: 980px) {
  .cs-kart { flex-wrap: wrap; gap: 10px 14px; padding: 12px 16px; }
  .cs-izgara { flex-wrap: wrap; gap: 4px 0; }
  .cs-oge { padding: 4px 14px; }
  .cs-oge:first-child { padding-left: 0; }
}
@media (max-width: 620px) {
  /* Telefonda kutular alt alta değil, 2x2 yan yana: şerit kısa kalır, rakamlar tek bakışta okunur. */
  .canli-sayac { padding: 14px 0 2px; }
  .cs-kart { border-radius: 15px; padding: 10px 12px; gap: 8px; flex-direction: column; align-items: stretch; }
  .cs-rozet { align-self: flex-start; }
  .cs-izgara { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cs-oge, .cs-oge:first-child { padding: 7px 9px; width: auto; min-width: 0; gap: 8px;
    border-radius: 11px; background: rgba(1,26,56,.035); border: 1px solid rgba(1,26,56,.06); }
  .cs-oge + .cs-oge { border-left: 1px solid rgba(1,26,56,.06); }
  .cs-ikon { width: 28px; height: 28px; border-radius: 9px; }
  .cs-ikon svg { width: 15px; height: 15px; }
  .cs-veri { flex-direction: column; align-items: flex-start; gap: 0; }
  .cs-veri b { font-size: 17px; }
  .cs-etiket { font-size: 11px; line-height: 1.25; }
}
@media (max-width: 340px) { .cs-izgara { grid-template-columns: minmax(0, 1fr); } }
/* Kısa etiketler yalnızca telefondaki "başlığın yanında" kipinde (.cs-yanda) görünür. */
.cs-kisa { display: none; }
/* Sayaç kahramanın içinde basıldığında (sayac_konum=yanda) iç .kap ikinci kez boşluk/genişlik almasın. */
.kahraman-bas .canli-sayac { padding: 24px 0 0; }
.kahraman-bas .canli-sayac .kap { padding: 0; max-width: none; }
@media (max-width: 620px) {
  /* Telefonda sayaç, başlığın sağındaki boş alana sığan küçük bir kart olur: başlık sola akar, kart sağa yaslanır. */
  .cs-yanda-sar { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .cs-yanda-sar > div:first-child { flex: 1 1 auto; min-width: 0; }
  .cs-yanda-sar h1 { font-size: 20px; line-height: 1.35; }
  .cs-yanda-sar h1 br { display: none; }
  .cs-yanda-sar .canli-sayac { flex: 0 0 auto; width: clamp(128px, 43%, 164px); padding: 0; margin-top: -4px; }
  .cs-yanda .cs-kart { border-radius: 12px; padding: 6px 6px 6px; gap: 4px; box-shadow: 0 10px 24px -18px rgba(1,26,56,.5); }
  .cs-yanda .cs-kart::before { width: 160px; height: 160px; right: -60px; top: -80px; }
  .cs-yanda .cs-rozet { font-size: 8px; padding: 2px 7px 2px 6px; gap: 4px; letter-spacing: .12em; }
  .cs-yanda .cs-nokta { width: 5px; height: 5px; }
  .cs-yanda .cs-izgara { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .cs-yanda .cs-oge, .cs-yanda .cs-oge:first-child { padding: 3px 5px; gap: 4px; border-radius: 8px; }
  .cs-yanda .cs-ikon { width: 17px; height: 17px; border-radius: 6px; }
  .cs-yanda .cs-ikon svg { width: 10px; height: 10px; }
  .cs-yanda .cs-veri { flex-direction: row; align-items: baseline; gap: 4px; flex-wrap: nowrap; }
  .cs-yanda .cs-veri b { font-size: 13px; }
  .cs-yanda .cs-etiket { display: none; }
  /* Kısa etiket sığmazsa ikinci satıra kırılır; kesilip "…" olmaz. */
  .cs-yanda .cs-kisa { display: block; font-size: 9px; line-height: 1.15; color: #5d6b7a; min-width: 0; overflow-wrap: anywhere; }
}
html.hareketsiz .cs-nokta::after, html.hareketsiz .cs-oge.cs-degisti .cs-ikon { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .cs-nokta::after, .cs-oge.cs-degisti .cs-ikon { animation: none; }
}
@media print { .canli-sayac { display: none; } }