/* ═══════════════════════════════════════════════════════════
   Vetapirin tanıtım sitesi — stil
   Renkler mockup'tan piksel örneklenerek alındı (bkz. --gece, --yesil).
   Yazı tipleri kendi sunucumuzda (fonts.css) — Google Fonts CDN yok.
   ═══════════════════════════════════════════════════════════ */

:root{
  --gece:#0A141B;
  --gece-2:#0C1A22;
  --yesil:#21A98A;
  --yesil-acik:#2DBFA0;
  --dugme:#1B8F74;
  --dugme-koyu:#15775F;
  --orman:#0A312D;
  --mint:#EDF8F5;
  --mint-panel:#F2FAF8;
  --beyaz:#FFFFFF;
  --zemin:#FFFFFF;
  --metin:#0F2320;
  --metin-2:#5C6E6A;
  --cizgi:#E6EFEC;

  --kap:1180px;
  --yumusak:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
/* Yatay kaydırma kesin kapalı: yalnız body'ye vermek bazı tarayıcılarda
   yetmiyor, html hâlâ kayabiliyor. İkisine birden veriliyor. */
html{scroll-behavior:smooth; overflow-x:hidden; max-width:100%}
body{
  margin:0; max-width:100%;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.65; color:var(--metin);
  background:var(--zemin);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; line-height:1.14; letter-spacing:-.025em; font-weight:700}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}

.kap{width:100%; max-width:var(--kap); margin:0 auto; padding:0 24px}
.gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.atla{position:absolute;left:-9999px;top:0;background:var(--dugme);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0}
.atla:focus{left:0}
:focus-visible{outline:3px solid var(--yesil-acik); outline-offset:3px; border-radius:6px}

/* ───────────── ÜST MENÜ ───────────── */
.ustbar{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:14px 0;
  background:transparent;
  transition:background .35s var(--yumusak), box-shadow .35s var(--yumusak), padding .35s var(--yumusak);
}
.ustbar.kati{
  background:rgba(10,20,27,.88);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
  padding:9px 0;
}
.ustbar-ic{display:flex; align-items:center; gap:28px}
.marka{
  font-family:'Baloo 2',Inter,sans-serif; font-weight:800;
  font-size:26px; letter-spacing:-.02em; color:#fff; line-height:1; white-space:nowrap;
}
.marka i{font-style:normal; color:var(--yesil)}
.menu{display:flex; gap:30px; margin-left:auto}
.menu a{
  font-size:14.5px; font-weight:500; color:rgba(255,255,255,.78);
  position:relative; padding:4px 0; transition:color .2s;
}
.menu a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--yesil); transition:right .28s var(--yumusak);
}
.menu a:hover{color:#fff}
.menu a:hover::after{right:0}
.pill{
  background:var(--dugme); color:#fff; font-size:13.5px; font-weight:600;
  padding:10px 20px; border-radius:999px; white-space:nowrap;
  box-shadow:0 6px 18px -8px rgba(27,143,116,.9);
  transition:transform .2s var(--yumusak), background .2s;
}
.pill:hover{background:var(--yesil); transform:translateY(-2px)}
.menu-dugme{display:none; background:none; border:0; cursor:pointer; padding:8px; margin-left:auto}
.menu-dugme span{display:block; width:22px; height:2px; background:#fff; border-radius:2px; margin:4px 0; transition:.25s var(--yumusak)}
.menu-dugme[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-dugme[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-dugme[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ───────────── HERO ───────────── */
.hero{
  position:relative; background:var(--gece); color:#fff;
  padding:150px 0 130px; overflow:hidden; isolation:isolate;
}
.hero-isik{
  position:absolute; inset:-20% -10% auto -10%; height:120%;
  background:
    radial-gradient(760px 420px at 68% 18%, rgba(33,169,138,.16), transparent 62%),
    radial-gradient(560px 380px at 8% 78%, rgba(33,169,138,.08), transparent 60%);
  z-index:-2; pointer-events:none;
}
.hero-ic{position:relative; z-index:2}
.hero-yazi{max-width:min(520px,46vw)}

/* Hero görseli (telefonlar + inek/koyun + tarla) tek parça.
   Sol ve alt kenarı görselin içinde maskelendi; hero zeminine karışıyor.
   Konumlandırmada transform KULLANILMIYOR — GSAP parallax'ı transform'a yazıyor. */
/* Görselde HİÇBİR hareket yok (parallax/salınım kaldırıldı).
   ⚠️ max-height + object-fit:contain KULLANILMAZ: görseli kutunun içinde
   ortalayıp İKİ YANA boşluk bırakıyordu, sağdaki boşluğun sebebi buydu.
   Bunun yerine genişlik 860px ile sınırlanıyor; yükseklik oransal kalıyor
   (860 × 0,7224 ≈ 621 px) ve kutuya sığdığı için hiç kırpma/ortalama olmuyor.
   top:88 / bottom:96 -> görsel yukarı çekilir, tepedeki süs ikonları
   sabit menüye değmez. */
.hero-gorsel{
  position:absolute; right:0; top:88px; bottom:96px;
  width:min(56vw,860px);
  display:flex; align-items:center; justify-content:flex-end;
  z-index:-1; pointer-events:none; user-select:none;
}
.hero-gorsel img{width:100%; height:auto}

.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.02em;
  color:var(--yesil); margin-bottom:16px;
}
.eyebrow.koyu{color:var(--dugme); text-transform:uppercase; letter-spacing:.1em; font-size:12px}

.rozet-bas{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:26px;
  padding:9px 20px 9px 15px; border-radius:999px;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);
  font-size:13.5px; font-weight:500; color:rgba(255,255,255,.86);
}
.rozet-bas i{
  width:8px; height:8px; border-radius:50%; background:var(--yesil);
  box-shadow:0 0 0 4px rgba(33,169,138,.18); flex:none;
}

.hero h1{font-size:clamp(40px,5.1vw,63px); font-weight:700; letter-spacing:-.035em}
.hero h1 .vurgu{
  position:relative; display:inline-block;
  color:var(--yesil-acik);
  background-image:linear-gradient(100deg,var(--yesil-acik) 0 42%,#8FF3DC 50%,var(--yesil-acik) 58% 100%);
  background-size:260% 100%; background-position:180% 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-govde{
  margin-top:20px; max-width:430px;
  font-size:16.5px; color:rgba(255,255,255,.7); line-height:1.72;
}

.magaza{display:flex; gap:13px; margin-top:32px; flex-wrap:wrap}
.magaza-dugme{
  display:inline-flex; align-items:center; gap:11px;
  padding:11px 20px 11px 16px; border-radius:13px;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12);
  transition:transform .25s var(--yumusak), background .25s, border-color .25s;
  cursor:default;
}
.magaza-dugme:hover{transform:translateY(-3px); background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2)}
.magaza-metin{display:flex; flex-direction:column; line-height:1.25}
.magaza-metin b{font-size:14.5px; font-weight:600; color:#fff}
.magaza-metin i{font-style:normal; font-size:11.5px; color:rgba(255,255,255,.55)}
.magaza.beyaz .magaza-dugme{background:#fff; border-color:#fff}
.magaza.beyaz .magaza-dugme:hover{background:#fff; transform:translateY(-3px)}
.magaza.beyaz .magaza-metin b{color:var(--orman)}
.magaza.beyaz .magaza-metin i{color:rgba(10,49,45,.6)}

.abone{
  display:flex; align-items:center; margin-top:34px; max-width:430px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:5px 5px 5px 16px; gap:5px;
}
.abone input{
  flex:1; min-width:0; background:none; border:0; color:#fff;
  padding:11px 14px; font:inherit; font-size:14.5px;
}
.abone input::placeholder{color:rgba(255,255,255,.42)}
.abone-ikon{color:rgba(255,255,255,.4); flex:none}
.abone input:focus{outline:none}
.abone button{
  background:var(--dugme); color:#fff; border:0; border-radius:9px;
  padding:11px 22px; font:inherit; font-size:14.5px; font-weight:600; cursor:pointer;
  transition:background .2s, transform .2s var(--yumusak);
}
.abone button:hover{background:var(--yesil); transform:translateY(-1px)}
.abone-sonuc{margin-top:10px; font-size:13.5px; color:var(--yesil-acik); min-height:20px}


.tel{width:214px; flex:none}

/* Gerçek cihaz çerçevesi: dış metalik kasa + iç çerçeve + ekran.
   Ekran görüntüleri "havada duran resim" gibi değil, telefonun İÇİNDE durur. */
.tel-govde{
  position:relative; border-radius:34px;
  background:linear-gradient(145deg,#3A444C 0%,#151C22 26%,#0C1216 62%,#2E373E 100%);
  padding:10px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16) inset,     /* kasa üst parlaması */
    0 0 0 1px rgba(0,0,0,.55),                 /* kasa dış hattı */
    0 30px 64px -22px rgba(0,0,0,.8);
}
.tel-govde img{
  border-radius:25px; width:100%; height:auto; display:block;
  box-shadow:0 0 0 1px rgba(0,0,0,.65);
}
/* ekran çentiği (dynamic island) */
.tel-govde::after{
  content:""; position:absolute; top:19px; left:50%; transform:translateX(-50%);
  width:46px; height:13px; border-radius:99px; background:#05080A;
  box-shadow:0 0 0 1px rgba(255,255,255,.06); z-index:4; pointer-events:none;
}
/* yan tuşlar */
.tel-govde::before{
  content:""; position:absolute; right:-2px; top:27%; width:2px; height:52px;
  border-radius:2px; background:linear-gradient(#4A555D,#222A30);
  z-index:2; pointer-events:none;
}

/* orta telefon: markalı karşılama ekranı */

.hero-dalga{position:absolute; left:0; right:0; bottom:-1px; line-height:0}
.hero-dalga svg{width:100%; height:96px; display:block}

/* ───────────── İSTATİSTİK ───────────── */
.istatistik-alan{background:var(--zemin); padding:0 0 12px}
.istatistik-kart{
  margin-top:-46px; position:relative; z-index:5;
  background:#fff; border:1px solid var(--cizgi); border-radius:20px;
  box-shadow:0 2px 4px rgba(15,35,32,.03), 0 24px 60px -30px rgba(15,35,32,.22);
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:26px 12px;
}
.ist{display:flex; align-items:center; gap:14px; justify-content:center; padding:6px 14px; position:relative}
.ist+.ist::before{content:""; position:absolute; left:0; top:14%; bottom:14%; width:1px; background:var(--cizgi)}
.ist b{display:block; font-size:23px; font-weight:700; letter-spacing:-.03em; line-height:1.15}
/* DİKKAT: burada `.ist span` yazılırsa ikon kutusunu da yakalar ve onun
   display:grid + rengini ezer (ikon kutunun sol üstüne sıkışıp grileşir).
   Bu yüzden yalnızca metin bloğundaki span hedefleniyor. */
.ist>div span{display:block; font-size:13px; color:var(--metin-2)}
.ist-ikon{
  width:42px; height:42px; border-radius:13px; flex:none;
  display:grid; place-items:center;
}
.ist-ikon svg{display:block}
.i-yesil{background:#E4F6F0; color:#12876C}
.i-mint {background:#EAF7F2; color:#178A6E}
.i-mavi {background:#E8F0FE; color:#2563EB}
.i-mor  {background:#F0EBFE; color:#7C3AED}
.i-pembe{background:#FDEBF1; color:#DB2777}

/* ───────────── GENEL BÖLÜM ───────────── */
.bolum{padding:96px 0}
.bolum h2{font-size:clamp(29px,3.3vw,41px)}
.govde{margin-top:18px; color:var(--metin-2); font-size:16px; line-height:1.75; max-width:460px}
.zemin-mint{background:var(--mint-panel)}

.dugme{
  display:inline-flex; align-items:center; gap:9px; margin-top:28px;
  padding:14px 24px; border-radius:12px; font-size:15px; font-weight:600;
  transition:transform .22s var(--yumusak), background .22s, box-shadow .22s;
}
.dugme svg{transition:transform .25s var(--yumusak)}
.dugme:hover svg{transform:translateX(4px)}
.birincil{background:var(--dugme); color:#fff; box-shadow:0 10px 26px -12px rgba(27,143,116,.85)}
.birincil:hover{background:var(--dugme-koyu); transform:translateY(-2px)}

/* ───────────── ÖZELLİKLER ───────────── */
.ozellik-duzen{display:grid; grid-template-columns:.86fr 1.14fr; gap:56px; align-items:center}
.ozellik-kartlar{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.okart{
  background:#fff; border:1px solid var(--cizgi); border-radius:18px; padding:26px 24px 22px;
  box-shadow:0 1px 2px rgba(15,35,32,.03);
  transition:transform .3s var(--yumusak), box-shadow .3s var(--yumusak), border-color .3s;
  position:relative; overflow:hidden;
}
.okart::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--yesil); transform:scaleY(0); transform-origin:top;
  transition:transform .35s var(--yumusak);
}
.okart:hover{transform:translateY(-6px); box-shadow:0 4px 8px rgba(15,35,32,.04), 0 22px 44px -20px rgba(15,35,32,.28); border-color:#D8E9E3}
.okart:hover::before{transform:scaleY(1)}
.okart-ikon{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center; margin-bottom:18px;
  transition:transform .35s var(--yumusak);
}
.okart:hover .okart-ikon{transform:translateY(-3px) rotate(-5deg)}
.okart h3{font-size:17.5px; font-weight:700}
.okart p{margin-top:9px; font-size:14px; color:var(--metin-2); line-height:1.68}
.okart-link{
  display:inline-block; margin-top:16px; font-size:13.5px; font-weight:600; color:var(--dugme);
}
.okart-link span{display:inline-block; transition:transform .25s var(--yumusak)}
.okart:hover .okart-link span{transform:translateX(4px)}

/* ───────────── UYGULAMA PANELİ ───────────── */
.mint-panel{
  background:linear-gradient(160deg,var(--mint) 0%,#F7FCFA 70%);
  border:1px solid #DFF0EA; border-radius:30px; padding:64px 56px;
}
.uyg-duzen{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center}
.tikli{margin-top:24px; display:grid; gap:13px}
.tikli li{position:relative; padding-left:29px; font-size:15px; color:var(--metin)}
.tikli li::before{
  content:""; position:absolute; left:0; top:7px; width:18px; height:18px; border-radius:50%;
  background:#D6F0E7;
}
.tikli li::after{
  content:""; position:absolute; left:5.5px; top:11.5px; width:7px; height:3.5px;
  border-left:2px solid #12876C; border-bottom:2px solid #12876C;
  transform:rotate(-45deg);
}
.uyg-telefonlar{position:relative; height:520px; display:flex; align-items:center; justify-content:center}
.uyg-telefonlar .tel{position:absolute}
.uyg-sol-tel {transform:translateX(-124px) translateY(26px) rotate(-8deg) scale(.86); z-index:1}
.uyg-sag-tel {transform:translateX(124px) translateY(26px) rotate(8deg) scale(.86); z-index:1}
.uyg-orta-tel{z-index:3; width:226px}
.uyg-telefonlar .tel-govde{box-shadow:0 26px 54px -24px rgba(15,35,32,.5), 0 0 0 1px rgba(15,35,32,.06)}
.rozet{
  position:absolute; width:38px; height:38px; border-radius:12px; background:#fff;
  display:grid; place-items:center; z-index:4;
  box-shadow:0 8px 20px -8px rgba(15,35,32,.3);
}
.rozet.r1{top:6%;   left:6%}
.rozet.r2{top:34%;  left:-2%}
.rozet.r3{top:22%;  right:4%}
.rozet.r4{bottom:14%; right:-1%}

/* ───────────── İKİLİ BÖLÜMLER ───────────── */
.ikili-duzen{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.ikili.ters .ikili-duzen{direction:rtl}
.ikili.ters .ikili-duzen>*{direction:ltr}
.ikili-gorsel{display:flex; justify-content:center}
.tel-tekil{width:262px}
.tel-tekil .tel-govde{box-shadow:0 30px 66px -26px rgba(15,35,32,.45), 0 0 0 1px rgba(15,35,32,.06)}

.mini-ist{display:flex; gap:34px; margin-top:28px}
.mini-ist b{display:block; font-size:30px; font-weight:700; color:var(--dugme); letter-spacing:-.03em}
.mini-ist span{font-size:13px; color:var(--metin-2)}

.durumlar{margin-top:26px; display:grid; gap:12px}
.durumlar li{display:flex; align-items:center; gap:11px; font-size:14.5px; color:var(--metin-2)}
.nokta{width:9px; height:9px; border-radius:50%; flex:none}
.nokta.sari{background:#F0B429; box-shadow:0 0 0 4px rgba(240,180,41,.16)}
.nokta.kirmizi{background:#E5484D; box-shadow:0 0 0 4px rgba(229,72,77,.14)}
.nokta.yesil{background:#17976F; box-shadow:0 0 0 4px rgba(23,151,111,.14)}

.zaman{margin-top:26px; display:grid; gap:0; position:relative; padding-left:8px}
.zaman li{position:relative; padding:0 0 22px 30px; font-size:14.5px; color:var(--metin-2); border-left:1.5px solid var(--cizgi)}
.zaman li:last-child{border-left-color:transparent; padding-bottom:0}
.zaman li::before{
  content:""; position:absolute; left:-6.5px; top:6px; width:11px; height:11px;
  border-radius:50%; background:#fff; border:2.5px solid var(--yesil);
}
.zaman li span{display:block; font-size:12px; font-weight:700; color:var(--dugme); letter-spacing:.02em}

/* sohbet telefonu */
.tel-sohbet{overflow:hidden}
.sohbet-ust{
  background:#0F2B26; border-radius:25px 25px 0 0; padding:36px 16px 13px;
  display:flex; align-items:center; gap:10px;
}
.sohbet-avatar{
  width:34px; height:34px; border-radius:50%; background:var(--dugme); color:#fff;
  display:grid; place-items:center; font-size:12px; font-weight:700; flex:none;
}
.sohbet-ust b{display:block; font-size:13.5px; color:#fff; font-weight:600}
.sohbet-ust i{font-style:normal; font-size:11px; color:#6FD8BC}
.sohbet-govde{
  background:#F3F7F6; padding:16px 13px; display:flex; flex-direction:column; gap:9px;
  min-height:330px;
}
.balon{
  max-width:82%; padding:9px 13px; border-radius:15px; font-size:12.5px; line-height:1.5;
}
.balon.gelen{background:#fff; color:var(--metin); border-bottom-left-radius:5px; box-shadow:0 1px 2px rgba(15,35,32,.07)}
.balon.giden{background:var(--dugme); color:#fff; align-self:flex-end; border-bottom-right-radius:5px}
.sohbet-alt{
  background:#fff; padding:13px; border-radius:0 0 25px 25px; border-top:1px solid #E7EEEC;
}
.sohbet-alt span{
  display:block; background:#F1F5F4; border-radius:999px; padding:9px 14px;
  font-size:12px; color:#9AA8A5;
}

/* ───────────── ORMAN PANEL (yorum + CTA) ───────────── */
.orman-panel{
  background:var(--orman); color:#fff; border-radius:26px;
  padding:56px 52px; display:grid; grid-template-columns:1fr 1fr; gap:52px;
  position:relative; overflow:hidden;
}
.orman-panel::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(620px 320px at 88% 12%, rgba(45,191,160,.16), transparent 62%);
  pointer-events:none;
}
.orman-ikonlar{position:absolute; inset:0; pointer-events:none}
.oi{position:absolute; font-size:26px; opacity:.12}
.oi.o1{top:12%; right:8%}   .oi.o2{top:62%; right:20%}
.oi.o3{top:34%; right:38%}  .oi.o4{bottom:12%; right:6%}
.oi.o5{top:76%; right:44%}  .oi.o6{top:6%;  right:30%}
.yorum{position:relative; padding-right:34px; border-right:1px solid rgba(255,255,255,.13)}
.tirnak{
  display:block; font-family:Georgia,serif; font-size:62px; line-height:.7;
  color:var(--yesil-acik); opacity:.55; margin-bottom:10px;
}
.yorum blockquote{margin:0; font-size:16px; line-height:1.78; color:rgba(255,255,255,.9)}
.yorum-kisi{display:flex; align-items:center; gap:13px; margin-top:26px}
.yorum-avatar{
  width:44px; height:44px; border-radius:50%; flex:none;
  background:linear-gradient(150deg,#2DBFA0,#12876C); color:#fff;
  display:grid; place-items:center; font-size:14px; font-weight:700;
}
.yorum-kisi b{display:block; font-size:14.5px; font-weight:600}
.yorum-kisi i{font-style:normal; font-size:12.5px; color:rgba(255,255,255,.55)}
.orman-cta{position:relative}
.orman-cta h2{font-size:clamp(26px,2.9vw,35px); color:#fff}
.orman-cta p{margin-top:15px; font-size:15px; color:rgba(255,255,255,.7); line-height:1.72}
.orman-cta .magaza{margin-top:26px}

/* ───────────── FOOTER ───────────── */
footer{background:#fff; border-top:1px solid var(--cizgi); padding:62px 0 0}
.footer-duzen{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:40px}
.koyu-marka{color:var(--metin); font-size:25px}
.footer-marka p{margin-top:14px; font-size:14px; color:var(--metin-2); max-width:290px; line-height:1.7}
.sosyal{
  display:inline-grid; place-items:center; width:38px; height:38px; margin-top:20px;
  border-radius:11px; background:#F2F7F5; color:var(--metin-2);
  transition:background .22s, color .22s, transform .22s var(--yumusak);
}
.sosyal:hover{background:var(--dugme); color:#fff; transform:translateY(-2px)}
.footer-sutun h4{font-size:14px; font-weight:700; margin-bottom:15px}
.footer-sutun a{display:block; font-size:14px; color:var(--metin-2); padding:5px 0; transition:color .2s}
.footer-sutun a:hover{color:var(--dugme)}
.footer-alt{
  margin-top:50px; padding:20px 24px; border-top:1px solid var(--cizgi);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:13px; color:var(--metin-2);
}
.eleonor b{font-weight:600; color:var(--metin)}

/* ───────────── ANİMASYON BAŞLANGIÇ DURUMLARI ───────────── */
/* JS yüklenmezse içerik yine görünür: js sınıfı eklenince gizlenir. */
.js .hero-oge,
.js .reveal>*,
.js .reveal-tel,
.js .okart,
.js .ist,
.js .hero-gorsel img{opacity:0}
/* ───────────── DUYARLI ───────────── */
@media (max-width:1080px){
  .ozellik-duzen{grid-template-columns:1fr; gap:40px}
  .uyg-duzen{grid-template-columns:1fr; gap:36px}
  .mint-panel{padding:48px 32px}
  .orman-panel{grid-template-columns:1fr; gap:38px; padding:44px 34px}
  .yorum{padding-right:0; border-right:0; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.13)}
}
@media (max-width:900px){
  .menu{
    position:fixed; inset:64px 0 auto 0; flex-direction:column; gap:0;
    background:rgba(10,20,27,.97); backdrop-filter:blur(14px);
    padding:14px 24px 22px; margin:0;
    transform:translateY(-140%); transition:transform .35s var(--yumusak);
    box-shadow:0 18px 34px -18px rgba(0,0,0,.7);
  }
  .menu.acik{transform:none}
  .menu a{padding:13px 0; font-size:16px; border-bottom:1px solid rgba(255,255,255,.07)}
  .menu a::after{display:none}
  .menu-dugme{display:block}
  .pill{display:none}
  /* Mobilde sıra: ÖNCE metin, SONRA görsel.
     DOM'da görsel önce geliyor; flex + order ile ters çevriliyor, böylece
     başlık ekranın tepesinde kalıyor (hem okunurluk hem SEO için).
     Negatif alt kenar KALDIRILDI: rozeti görselin üstüne bindiriyordu. */
  .hero{padding:104px 0 16px; display:flex; flex-direction:column}
  .hero-ic{order:1}
  .hero-yazi{max-width:none}
  .hero-gorsel{
    order:2;
    position:relative; right:auto; top:auto; bottom:auto;
    width:126%; margin:38px -13% 0;
    justify-content:center;
  }
  .istatistik-kart{grid-template-columns:1fr 1fr; gap:8px 0; padding:20px 6px}
  .ist:nth-child(3)::before,.ist:nth-child(2)::before{}
  .ist:nth-child(odd)::before{display:none}
  .ikili-duzen{grid-template-columns:1fr; gap:44px}
  .ikili.ters .ikili-duzen{direction:ltr}
  .ikili-gorsel{order:-1}
  .footer-duzen{grid-template-columns:1fr 1fr; gap:34px}
}
@media (max-width:620px){
  .bolum{padding:68px 0}
  .hero h1{font-size:38px}
  .ozellik-kartlar{grid-template-columns:1fr}
  .istatistik-kart{grid-template-columns:1fr; margin-top:-30px}
  .ist{justify-content:flex-start; padding:12px 20px}
  .ist::before{display:none !important}
  .ist+.ist{border-top:1px solid var(--cizgi)}  .uyg-telefonlar{height:420px; transform:scale(.84)}
  .mint-panel{padding:36px 20px; border-radius:22px}
  .orman-panel{padding:34px 22px}
  .footer-duzen{grid-template-columns:1fr}
  .footer-alt{flex-direction:column; gap:8px}
  .abone{max-width:none}
  .tel-tekil{width:230px}
}

/* ───────────── HAREKET AZALTMA ───────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .js .hero-oge,.js .reveal>*,.js .reveal-tel,.js .okart,.js .ist,
  .js .hero-gorsel img{opacity:1 !important; transform:none !important}
}