/* ============================================================
   ÇAPAR BALON — stil.css (v3, işçilik sürümü)
   Tek tasarım dili: tüm geçişler .25s, tek gölge tonu, 16px köşe
   ============================================================ */

:root{
  --antrasit:#1d2430;
  --antrasit-koyu:#151a24;
  --kirmizi:#e63946;
  --kirmizi-koyu:#c22633;
  --kirmizi-acik:#fdecee;
  --zemin:#f6f7f9;
  --beyaz:#ffffff;
  --metin:#2a2f3a;
  --gri:#69707d;
  --cizgi:#e6e8ee;
  --golge-1:0 4px 16px rgba(21,26,36,.06);
  --golge-2:0 14px 34px rgba(21,26,36,.12);
  --yuvarlak:16px;
  --gecis:.25s cubic-bezier(.4,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',Arial,sans-serif;color:var(--metin);background:var(--beyaz);line-height:1.7;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--kirmizi);text-decoration:none;transition:color var(--gecis)}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:'Manrope','Inter',sans-serif;color:var(--antrasit);line-height:1.22}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:800;letter-spacing:-.5px}
h2{font-size:clamp(1.55rem,3.2vw,2.2rem);font-weight:800;letter-spacing:-.3px}
h3{font-size:1.12rem;font-weight:700}
.kapsayici{max-width:1180px;margin:0 auto;padding:0 22px}
.govde-kilit{overflow:hidden}

/* ---------- Dekoratif şekiller ---------- */
.dekorlu{position:relative;overflow:hidden}
.sekil{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.sekil-halka{border:2px solid rgba(230,57,70,.10)}
.sekil-halka-k{border:2px solid rgba(29,36,48,.07)}
.sekil-dolu{background:radial-gradient(circle at 35% 30%, rgba(230,57,70,.07), transparent 65%)}
.sekil-dolu-k{background:radial-gradient(circle at 35% 30%, rgba(29,36,48,.06), transparent 65%)}
.dekorlu > .kapsayici{position:relative;z-index:1}

/* ---------- Üst iletişim şeridi ---------- */
.ust-serit{background:var(--antrasit-koyu);color:#aeb4c2;font-size:.82rem;position:relative;z-index:60}
.ust-serit .kapsayici{display:flex;justify-content:space-between;align-items:center;height:38px;gap:14px}
.ust-serit a{color:#dfe3ec;font-weight:500}
.ust-serit a:hover{color:#fff}
.ust-serit .sol{display:flex;gap:22px}
.ust-serit .sag{white-space:nowrap}

/* ---------- Ana menü barı (kaydırınca küçülür) ---------- */
.ust-bar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--cizgi);transition:box-shadow var(--gecis)}
.ust-bar .kapsayici{display:flex;align-items:center;justify-content:space-between;height:86px;transition:height var(--gecis)}
.logo img{height:56px;width:auto;transition:height var(--gecis)}
.ust-bar.kucuk{box-shadow:var(--golge-2)}
.ust-bar.kucuk .kapsayici{height:66px}
.ust-bar.kucuk .logo img{height:44px}
.menu{display:flex;align-items:center;gap:2px;list-style:none}
.menu a{position:relative;display:block;padding:10px 15px;color:var(--antrasit);font-weight:600;font-size:.95rem;transition:color var(--gecis)}
.menu a::after{content:"";position:absolute;left:15px;right:15px;bottom:4px;height:2.5px;border-radius:2px;background:var(--kirmizi);transform:scaleX(0);transform-origin:left;transition:transform var(--gecis)}
.menu a:hover{color:var(--kirmizi)}
.menu a:hover::after,.menu a.aktif::after{transform:scaleX(1)}
.menu a.aktif{color:var(--kirmizi)}
.menu a.menu-cta{background:var(--kirmizi);color:#fff;border-radius:10px;padding:12px 22px;margin-left:12px;transition:background var(--gecis),transform var(--gecis),box-shadow var(--gecis)}
.menu a.menu-cta::after{display:none}
.menu a.menu-cta:hover{background:var(--kirmizi-koyu);color:#fff;transform:translateY(-2px);box-shadow:var(--golge-2)}
.hamburger{display:none;background:none;border:none;padding:10px;z-index:70}
.hamburger span{display:block;width:26px;height:3px;background:var(--antrasit);margin:5px 0;border-radius:3px;transition:transform var(--gecis),opacity var(--gecis)}
.hamburger.acik span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.acik span:nth-child(2){opacity:0}
.hamburger.acik span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg,#fff 0%,var(--zemin) 100%);border-bottom:1px solid var(--cizgi)}
.hero .kapsayici{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center;padding-top:78px;padding-bottom:92px}
.hero .rozet{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(230,57,70,.2);color:var(--kirmizi);font-weight:700;font-size:.8rem;letter-spacing:2px;padding:9px 18px;border-radius:999px;margin-bottom:22px;box-shadow:var(--golge-1)}
.hero h1 em{font-style:normal;color:var(--kirmizi)}
.hero p{font-size:1.1rem;color:var(--gri);margin:18px 0 32px;max-width:540px}
.hero-gorsel{display:flex;justify-content:center}
.hero-gorsel svg{width:100%;max-width:430px;height:auto}
.guven-satiri{display:flex;gap:24px;margin-top:40px;flex-wrap:wrap}
.guven-satiri span{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--antrasit)}
.guven-satiri b{color:var(--kirmizi)}
.sallan{animation:sallan 6s ease-in-out infinite}
@keyframes sallan{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- Sektör bandı (marquee) ---------- */
.bant{background:var(--antrasit);padding:18px 0;overflow:hidden}
.bant-ic{display:flex;width:max-content;animation:kayma 30s linear infinite}
.bant:hover .bant-ic{animation-play-state:paused}
.bant span{color:#aeb4c2;font-weight:600;font-size:.92rem;letter-spacing:1.5px;white-space:nowrap;padding:0 28px;display:flex;align-items:center;gap:28px}
.bant b{color:var(--kirmizi);font-weight:400}
@keyframes kayma{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Düğmeler ---------- */
.dugme{display:inline-block;padding:14px 30px;border-radius:10px;font-weight:700;font-size:.97rem;transition:background var(--gecis),transform var(--gecis),box-shadow var(--gecis),color var(--gecis)}
.dugme:hover{transform:translateY(-2px);box-shadow:var(--golge-2)}
.dugme:active{transform:translateY(0)}
.dugme-dolu{background:var(--kirmizi);color:#fff}
.dugme-dolu:hover{background:var(--kirmizi-koyu);color:#fff}
.dugme-cerceve{border:2px solid var(--antrasit);color:var(--antrasit);margin-left:10px}
.dugme-cerceve:hover{background:var(--antrasit);color:#fff}

/* ---------- Bölümler ---------- */
.bolum{padding:88px 0}
.bolum-zemin{background:var(--zemin)}
.bolum-koyu{background:var(--antrasit)}
.bolum-koyu h2,.bolum-koyu h3{color:#fff}
.bolum-koyu p{color:#aeb4c2}
.bolum-baslik{max-width:680px;margin:0 auto 54px;text-align:center}
.bolum-baslik .ust-yazi{color:var(--kirmizi);font-weight:700;letter-spacing:3px;font-size:.78rem;text-transform:uppercase}
.bolum-baslik h2{margin-top:10px}
.bolum-baslik p{color:var(--gri);margin-top:12px}

/* ---------- Kartlar ---------- */
.izgara{display:grid;gap:24px}
.izgara-2{grid-template-columns:repeat(2,1fr)}
.izgara-3{grid-template-columns:repeat(3,1fr)}
.izgara-4{grid-template-columns:repeat(4,1fr)}
.kart{background:#fff;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);padding:32px;box-shadow:var(--golge-1);transition:box-shadow var(--gecis),transform var(--gecis),border-color var(--gecis)}
.kart:hover{box-shadow:var(--golge-2);transform:translateY(-5px);border-color:transparent}
.kart .simge{width:54px;height:54px;border-radius:14px;background:var(--kirmizi-acik);color:var(--kirmizi);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:18px;transition:background var(--gecis),transform var(--gecis)}
.kart:hover .simge{background:var(--kirmizi-acik);transform:scale(1.08) rotate(-4deg)}
.kart h3{margin-bottom:8px}
.kart p{color:var(--gri);font-size:.94rem}

/* ---------- Süreç adımları ---------- */
.surec{counter-reset:adim;position:relative}
.surec .kart{position:relative;padding-top:66px}
.surec .kart::before{counter-increment:adim;content:"0" counter(adim);position:absolute;top:24px;left:30px;font-family:'Manrope',sans-serif;font-weight:800;font-size:1.55rem;color:var(--kirmizi);opacity:.22;transition:opacity var(--gecis)}
.surec .kart:hover::before{opacity:1}

/* ---------- Katalog ---------- */
.filtreler{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:42px}
.filtre{background:#fff;border:1.5px solid var(--cizgi);color:var(--antrasit);font-weight:600;font-size:.9rem;padding:11px 22px;border-radius:999px;transition:all var(--gecis)}
.filtre:hover{border-color:var(--kirmizi);color:var(--kirmizi);transform:translateY(-2px)}
.filtre.aktif{background:var(--kirmizi);border-color:var(--kirmizi);color:#fff;box-shadow:var(--golge-1)}
.katalog{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.katalog-kart{background:#fff;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);overflow:hidden;box-shadow:var(--golge-1);transition:box-shadow var(--gecis),transform var(--gecis);cursor:pointer;text-align:left;display:block;width:100%}
.katalog-kart:hover{box-shadow:var(--golge-2);transform:translateY(-5px)}
.katalog-kart .gorsel{position:relative;height:175px;display:flex;align-items:center;justify-content:center;font-size:3.7rem;background:linear-gradient(135deg,var(--zemin),#eceef3);border-bottom:1px solid var(--cizgi);overflow:hidden}
.katalog-kart .ortu{position:absolute;inset:auto 0 0 0;background:rgba(29,36,48,.86);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff;font-size:.85rem;font-weight:600;padding:12px 18px;transform:translateY(100%);transition:transform var(--gecis)}
.katalog-kart:hover .ortu{transform:none}
.katalog-kart .icerik{padding:20px 24px 24px}
.katalog-kart .etiket{display:inline-block;background:var(--kirmizi-acik);color:var(--kirmizi);font-size:.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:6px;margin-bottom:10px}
.katalog-kart p{color:var(--gri);font-size:.9rem;margin-top:6px}
.katalog-kart.gizli{display:none}

/* ---------- Detay penceresi (lightbox) ---------- */
.pencere-ortu{position:fixed;inset:0;background:rgba(21,26,36,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:100;display:flex;align-items:center;justify-content:center;padding:22px;opacity:0;visibility:hidden;transition:opacity var(--gecis),visibility var(--gecis)}
.pencere-ortu.acik{opacity:1;visibility:visible}
.pencere{background:#fff;border-radius:var(--yuvarlak);max-width:560px;width:100%;max-height:88vh;overflow:auto;box-shadow:var(--golge-2);transform:translateY(18px) scale(.97);transition:transform var(--gecis)}
.pencere-ortu.acik .pencere{transform:none}
.pencere-gorsel{height:150px;display:flex;align-items:center;justify-content:center;font-size:4rem;background:linear-gradient(135deg,var(--zemin),#eceef3);border-radius:var(--yuvarlak) var(--yuvarlak) 0 0}
.pencere-ic{padding:28px 32px 32px}
.pencere-ic h3{font-size:1.35rem;margin:8px 0 10px}
.pencere-ic p{color:var(--gri)}
.pencere-ic ul{list-style:none;margin:18px 0 24px}
.pencere-ic li{padding:7px 0 7px 28px;position:relative;color:var(--metin);font-size:.94rem}
.pencere-ic li::before{content:"✓";position:absolute;left:0;color:var(--kirmizi);font-weight:800}
.pencere-kapat{position:sticky;top:0;float:right;margin:14px 14px 0 0;width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.85);backdrop-filter:blur(4px);color:var(--antrasit);font-size:1.1rem;font-weight:700;box-shadow:var(--golge-1);transition:background var(--gecis),color var(--gecis),transform var(--gecis);z-index:2}
.pencere-kapat:hover{background:var(--kirmizi);color:#fff;transform:rotate(90deg)}

/* ---------- Sayaçlar ---------- */
.sayilar{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.sayi h3{font-size:2.7rem;color:var(--kirmizi);font-weight:800;font-variant-numeric:tabular-nums}
.sayi p{font-size:.92rem}

/* ---------- Yorum kaydırıcısı ---------- */
.yorumlar{position:relative;max-width:760px;margin:0 auto}
.yorum-pist{overflow:hidden;border-radius:var(--yuvarlak)}
.yorum-serit{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.yorum{flex:0 0 100%;background:#fff;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);padding:40px 44px;box-shadow:var(--golge-1);text-align:center}
.yorum .tirnak{font-family:'Manrope',sans-serif;font-size:3rem;line-height:1;color:var(--kirmizi);opacity:.3}
.yorum p{font-size:1.05rem;color:var(--metin);margin:10px 0 20px}
.yorum .kimden{font-weight:700;color:var(--antrasit);font-size:.92rem}
.yorum .kimden small{display:block;color:var(--gri);font-weight:500;margin-top:2px}
.yorum-ok{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--cizgi);background:#fff;color:var(--antrasit);font-size:1.1rem;box-shadow:var(--golge-1);transition:background var(--gecis),color var(--gecis),transform var(--gecis);z-index:2}
.yorum-ok:hover{background:var(--kirmizi);color:#fff;transform:translateY(-50%) scale(1.08)}
.yorum-ok.geri{left:-58px}
.yorum-ok.ileri{right:-58px}
.yorum-noktalar{display:flex;gap:8px;justify-content:center;margin-top:24px}
.yorum-nokta{width:9px;height:9px;border-radius:50%;border:none;background:var(--cizgi);transition:background var(--gecis),transform var(--gecis)}
.yorum-nokta.aktif{background:var(--kirmizi);transform:scale(1.25)}

/* ---------- SSS akordeonu ---------- */
.sss{max-width:760px;margin:0 auto}
.sss-madde{background:#fff;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);margin-bottom:12px;overflow:hidden;transition:box-shadow var(--gecis)}
.sss-madde.acik{box-shadow:var(--golge-1)}
.sss-soru{width:100%;background:none;border:none;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px 26px;font-size:1rem;font-weight:700;color:var(--antrasit);transition:color var(--gecis)}
.sss-soru:hover{color:var(--kirmizi)}
.sss-soru .isaret{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--kirmizi-acik);color:var(--kirmizi);display:flex;align-items:center;justify-content:center;font-weight:800;transition:transform var(--gecis),background var(--gecis),color var(--gecis)}
.sss-madde.acik .isaret{transform:rotate(45deg);background:var(--kirmizi);color:#fff}
.sss-cevap{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1)}
.sss-cevap p{padding:0 26px 22px;color:var(--gri);font-size:.95rem}

/* ---------- İletişim ---------- */
.iletisim-izgara{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.iletisim-satir{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--cizgi);border-radius:var(--yuvarlak);padding:18px 20px;margin-bottom:14px;box-shadow:var(--golge-1);transition:transform var(--gecis),box-shadow var(--gecis)}
.iletisim-satir:hover{transform:translateY(-3px);box-shadow:var(--golge-2)}
.iletisim-satir .simge{flex:0 0 48px;height:48px;border-radius:12px;background:var(--kirmizi-acik);color:var(--kirmizi);display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.iletisim-satir a{font-weight:700;color:var(--antrasit)}
.iletisim-satir a:hover{color:var(--kirmizi)}
.harita{border:0;width:100%;height:380px;border-radius:var(--yuvarlak);box-shadow:var(--golge-1)}
.wa-dugme{display:inline-flex;align-items:center;gap:10px;background:#25d366;color:#fff;font-weight:700;padding:14px 28px;border-radius:10px;transition:transform var(--gecis),filter var(--gecis),box-shadow var(--gecis)}
.wa-dugme:hover{transform:translateY(-2px);filter:brightness(.95);color:#fff;box-shadow:var(--golge-2)}

/* ---------- İç sayfa başlığı ---------- */
.sayfa-basi{background:var(--antrasit);padding:60px 0;text-align:center;position:relative;overflow:hidden}
.sayfa-basi h1{color:#fff;position:relative;z-index:1}
.sayfa-basi p{color:#aeb4c2;margin-top:10px;position:relative;z-index:1}
.sayfa-basi .yol{color:#7d8496;font-size:.85rem;margin-top:14px;position:relative;z-index:1}
.sayfa-basi .yol a{color:#aeb4c2}
.sayfa-basi .yol a:hover{color:#fff}

/* ---------- CTA bandı ---------- */
.cta-bant{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--kirmizi),var(--kirmizi-koyu));border-radius:20px;padding:58px 50px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.cta-bant::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:2px solid rgba(255,255,255,.15)}
.cta-bant::after{content:"";position:absolute;right:40px;bottom:-80px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.06)}
.cta-bant h2{color:#fff}
.cta-bant p{color:#ffd9dd;margin-top:8px}
.cta-bant .dugme{background:#fff;color:var(--kirmizi);position:relative;z-index:1}
.cta-bant .dugme:hover{background:var(--antrasit);color:#fff}

/* ---------- Alt bilgi ---------- */
.alt-bilgi{background:var(--antrasit-koyu);color:#aeb4c2;padding:66px 0 30px;font-size:.94rem}
.alt-izgara{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:34px}
.alt-bilgi h3{color:#fff;margin-bottom:16px;font-size:1rem}
.alt-bilgi a{color:#aeb4c2;display:block;padding:4px 0}
.alt-bilgi a:hover{color:#fff;padding-left:4px}
.alt-bilgi .logo-beyaz{filter:brightness(0) invert(1);opacity:.92;height:46px;width:auto;margin-bottom:16px}
.telif{border-top:1px solid rgba(255,255,255,.1);margin-top:46px;padding-top:22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.83rem;color:#7d8496}

/* ---------- Sabit düğmeler ---------- */
.wa-sabit{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;align-items:center;gap:0;background:#25d366;color:#fff;border-radius:999px;padding:15px;box-shadow:var(--golge-2);font-weight:700;font-size:.92rem;transition:padding var(--gecis),gap var(--gecis)}
.wa-sabit svg{width:26px;height:26px;flex:0 0 auto}
.wa-sabit i{font-style:normal;max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .3s cubic-bezier(.4,0,.2,1)}
.wa-sabit:hover{color:#fff;padding:15px 22px;gap:10px}
.wa-sabit:hover i{max-width:110px}
.yukari{position:fixed;right:26px;bottom:92px;z-index:80;width:44px;height:44px;border-radius:12px;border:1px solid var(--cizgi);background:rgba(255,255,255,.9);backdrop-filter:blur(6px);color:var(--antrasit);font-size:1.1rem;box-shadow:var(--golge-1);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity var(--gecis),visibility var(--gecis),transform var(--gecis),background var(--gecis),color var(--gecis)}
.yukari.goster{opacity:1;visibility:visible;transform:none}
.yukari:hover{background:var(--kirmizi);color:#fff;border-color:var(--kirmizi)}

/* ---------- 404 ---------- */
.sayfa-404{min-height:70vh;display:flex;align-items:center;text-align:center}
.sayfa-404 h1{font-size:clamp(4rem,10vw,7rem);color:var(--kirmizi)}
.sayfa-404 p{color:var(--gri);max-width:420px;margin:14px auto 30px}

/* ---------- Kayarken canlanma ---------- */
.gorun{opacity:0;transform:translateY(24px);transition:opacity .55s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.4,0,.2,1)}
.gorun.geldi{opacity:1;transform:none}
.gecikme-1{transition-delay:.08s}
.gecikme-2{transition-delay:.16s}
.gecikme-3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .gorun{opacity:1;transform:none}
}

/* ---------- Mobil ---------- */
@media (max-width:960px){
  .hero .kapsayici{grid-template-columns:1fr;text-align:center;padding-top:52px;padding-bottom:64px}
  .hero p{margin-inline:auto}
  .guven-satiri{justify-content:center}
  .hero-gorsel{order:-1}
  .hero-gorsel svg{max-width:270px}
  .izgara-3,.izgara-4,.katalog{grid-template-columns:repeat(2,1fr)}
  .iletisim-izgara{grid-template-columns:1fr}
  .alt-izgara{grid-template-columns:1fr 1fr}
  .sayilar{grid-template-columns:repeat(2,1fr);gap:34px}
  .yorum-ok.geri{left:-8px}
  .yorum-ok.ileri{right:-8px}
}
@media (max-width:640px){
  .ust-serit .sag{display:none}
  .hamburger{display:block}
  .menu{position:fixed;inset:0;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);flex-direction:column;justify-content:center;align-items:center;gap:8px;transform:translateX(105%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:60}
  .menu.acik{transform:none}
  .menu a{font-size:1.25rem;padding:14px 22px}
  .menu a::after{bottom:8px}
  .menu a.menu-cta{margin:14px 0 0;font-size:1.05rem}
  .izgara-2,.izgara-3,.izgara-4,.katalog{grid-template-columns:1fr}
  .alt-izgara{grid-template-columns:1fr}
  .dugme-cerceve{margin-left:0;margin-top:12px}
  .cta-bant{padding:42px 28px;text-align:center;justify-content:center}
  .telif{justify-content:center;text-align:center}
  .yorum{padding:32px 26px}
  .bolum{padding:64px 0}
  .wa-sabit{right:16px;bottom:16px}
  .yukari{right:20px;bottom:84px}
}

/* ---------- Zaman çizelgesi ---------- */
.cizelge{position:relative;max-width:760px;margin:0 auto;padding-left:34px}
.cizelge::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--cizgi)}
.cizelge-madde{position:relative;padding-bottom:36px}
.cizelge-madde:last-child{padding-bottom:0}
.cizelge-madde::before{content:"";position:absolute;left:-31px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--kirmizi);border:3px solid #fff;box-shadow:0 0 0 2px var(--kirmizi)}
.cizelge-madde h3{color:var(--kirmizi);font-size:.95rem;letter-spacing:1.5px}
.cizelge-madde p{color:var(--gri);margin-top:4px}

/* ============================================================
   v3.1 — Renk katmanı ve ek işçilik
   ============================================================ */
:root{
  --mavi:#2f5fe0; --mavi-acik:#eaf0fd;
  --amber:#f5a623; --amber-acik:#fdf3e0;
  --teal:#0d9488; --teal-acik:#e2f6f4;
  --indigo:#6366f1; --indigo-acik:#eceefe;
}

/* Sayfa açılışında yumuşak belirme */
body{animation:sayfaGel .45s ease}
@keyframes sayfaGel{from{opacity:0}to{opacity:1}}

/* Okuma ilerleme çubuğu */
.ilerleme{position:fixed;top:0;left:0;height:3px;width:0;z-index:95;background:linear-gradient(90deg,var(--kirmizi),var(--amber),var(--mavi));border-radius:0 3px 3px 0;transition:width .1s linear}

/* Zemin bölümlerine yumuşak renk lekeleri */
.bolum-zemin{background:
  radial-gradient(560px 320px at 8% 0%, rgba(47,95,224,.05), transparent 60%),
  radial-gradient(520px 300px at 95% 100%, rgba(245,166,35,.06), transparent 60%),
  var(--zemin)}

/* Koyu bölümlere ince nokta dokusu */
.bolum-koyu,.sayfa-basi{background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.6px);background-size:22px 22px;background-color:var(--antrasit)}
.alt-bilgi{background-image:radial-gradient(rgba(255,255,255,.03) 1px, transparent 1.6px);background-size:22px 22px;background-color:var(--antrasit-koyu)}

/* Renkli simge çeşitleri */
.simge-mavi{background:var(--mavi-acik) !important;color:var(--mavi) !important}
.simge-amber{background:var(--amber-acik) !important;color:var(--amber) !important}
.simge-teal{background:var(--teal-acik) !important;color:var(--teal) !important}
.simge-indigo{background:var(--indigo-acik) !important;color:var(--indigo) !important}

/* Sayaçlara renk */
.sayi:nth-child(1) h3{color:#ff6b76}
.sayi:nth-child(2) h3{color:#6ea8ff}
.sayi:nth-child(3) h3{color:#ffc45c}
.sayi:nth-child(4) h3{color:#4fd1c5}

/* Zaman çizelgesi noktalarına renk */
.cizelge-madde:nth-child(1)::before{background:var(--kirmizi);box-shadow:0 0 0 2px var(--kirmizi)}
.cizelge-madde:nth-child(2)::before{background:var(--mavi);box-shadow:0 0 0 2px var(--mavi)}
.cizelge-madde:nth-child(3)::before{background:var(--amber);box-shadow:0 0 0 2px var(--amber)}
.cizelge-madde:nth-child(4)::before{background:var(--teal);box-shadow:0 0 0 2px var(--teal)}
.cizelge-madde:nth-child(2) h3{color:var(--mavi)}
.cizelge-madde:nth-child(3) h3{color:var(--amber)}
.cizelge-madde:nth-child(4) h3{color:var(--teal)}

/* Katalog: kategoriye göre renk kimliği (üst şerit + etiket) */
.katalog-kart{position:relative}
.katalog-kart::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:4px 4px 0 0;background:var(--kirmizi);opacity:0;transition:opacity var(--gecis);z-index:2}
.katalog-kart:hover::before{opacity:1}
.katalog-kart[data-grup="lateks"]::before{background:var(--mavi)}
.katalog-kart[data-grup="folyo"]::before{background:var(--amber)}
.katalog-kart[data-grup="ekipman"]::before{background:var(--teal)}
.katalog-kart[data-grup="susleme"]::before{background:var(--indigo)}
.katalog-kart[data-grup="lateks"] .etiket{background:var(--mavi-acik);color:var(--mavi)}
.katalog-kart[data-grup="folyo"] .etiket{background:var(--amber-acik);color:#b97e10}
.katalog-kart[data-grup="ekipman"] .etiket{background:var(--teal-acik);color:var(--teal)}
.katalog-kart[data-grup="susleme"] .etiket{background:var(--indigo-acik);color:var(--indigo)}

/* Filtre düğmelerine renk noktası */
.filtre::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:var(--gri);vertical-align:1px;transition:background var(--gecis)}
.filtre[data-filtre="hepsi"]::before{background:linear-gradient(90deg,var(--kirmizi),var(--amber),var(--mavi))}
.filtre[data-filtre="baskili"]::before{background:var(--kirmizi)}
.filtre[data-filtre="lateks"]::before{background:var(--mavi)}
.filtre[data-filtre="folyo"]::before{background:var(--amber)}
.filtre[data-filtre="ekipman"]::before{background:var(--teal)}
.filtre[data-filtre="susleme"]::before{background:var(--indigo)}
.filtre.aktif::before{background:#fff !important}

/* Yorumlara renkli baş harf rozeti */
.yorum .rozet-avatar{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:1.4rem}
.yorum:nth-child(1) .rozet-avatar{background:var(--kirmizi-acik)}
.yorum:nth-child(2) .rozet-avatar{background:var(--mavi-acik)}
.yorum:nth-child(3) .rozet-avatar{background:var(--amber-acik)}

/* Sektör bandındaki ayraçlara renk döngüsü */
.bant b:nth-of-type(3n+1){color:var(--kirmizi)}
.bant b:nth-of-type(3n+2){color:var(--amber)}
.bant b:nth-of-type(3n){color:#6ea8ff}

/* WhatsApp düğmesine zarif halka nabzı (zıplama yok) */
.wa-sabit::before{content:"";position:absolute;inset:0;border-radius:999px;border:2px solid #25d366;opacity:0;animation:halka 3.5s ease-out infinite}
@keyframes halka{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.wa-sabit{position:fixed}

/* Guven satırındaki onay işaretlerine renk */
.guven-satiri span:nth-child(1) b{color:var(--kirmizi)}
.guven-satiri span:nth-child(2) b{color:var(--mavi)}
.guven-satiri span:nth-child(3) b{color:var(--teal)}

/* CTA bandındaki dekora renk */
.cta-bant::before{border-color:rgba(255,255,255,.2)}

/* ============================================================
   v4 — Logo paleti: pembe ana renk + canlı, hareketli kimlik
   ============================================================ */
:root{
  /* Ana renk artık logodaki pembe/magenta */
  --kirmizi:#e91e7d; --kirmizi-koyu:#c01367; --kirmizi-acik:#fde8f3;
  --sari:#ffb400; --sari-acik:#fff4d9;
  --mavi:#1e7cf0; --mavi-acik:#e7f1fe;
  --turuncu:#ff8a1e; --turuncu-acik:#fff0e2;
  --yesil:#5cb724; --yesil-acik:#ebf7e3;
  /* Eski değişken adları yeni renklere bağlandı */
  --amber:#ffb400; --amber-acik:#fff4d9;
  --teal:#5cb724; --teal-acik:#ebf7e3;
  --indigo:#ff8a1e; --indigo-acik:#fff0e2;
}

/* Logo boyutu (kare/dikey logo için) */
.logo img{height:62px}
.ust-bar.kucuk .logo img{height:48px}
.alt-bilgi .logo-beyaz{filter:none;opacity:1;height:64px}

/* Header'a renkli kimlik: alt kenarda gökkuşağı çizgisi */
.ust-bar{border-bottom:none}
.ust-bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#e91e7d,#ffb400,#1e7cf0,#ff8a1e,#5cb724)}
.ust-serit{background:linear-gradient(90deg,#151a24,#1d2430 40%,#251d33 100%)}

/* Hero: canlı, yavaşça nefes alan renk zemini */
.hero{background:
  radial-gradient(640px 420px at 12% 8%, rgba(240,36,126,.09), transparent 60%),
  radial-gradient(560px 380px at 88% 18%, rgba(30,124,240,.08), transparent 60%),
  radial-gradient(620px 420px at 55% 100%, rgba(255,180,0,.10), transparent 65%),
  linear-gradient(180deg,#fff 0%,var(--zemin) 100%);
  background-size:200% 200%;animation:nefes 16s ease-in-out infinite alternate}
@keyframes nefes{from{background-position:0% 0%}to{background-position:100% 100%}}

/* Dekor şekilleri artık yavaşça süzülüyor + renkli */
.sekil{animation:suzul 13s ease-in-out infinite alternate}
.sekil:nth-of-type(2){animation-duration:17s;animation-delay:2s}
.sekil:nth-of-type(3){animation-duration:21s;animation-delay:4s}
@keyframes suzul{from{transform:translate(0,0) scale(1)}to{transform:translate(18px,-24px) scale(1.05)}}
.sekil-halka{border-color:rgba(240,36,126,.14)}
.sekil-halka-k{border-color:rgba(30,124,240,.12)}
.sekil-dolu{background:radial-gradient(circle at 35% 30%, rgba(255,180,0,.10), transparent 65%)}
.sekil-dolu-k{background:radial-gradient(circle at 35% 30%, rgba(92,183,36,.09), transparent 65%)}

/* Zemin bölümlerinin renk lekeleri güncel palete */
.bolum-zemin{background:
  radial-gradient(560px 320px at 8% 0%, rgba(30,124,240,.06), transparent 60%),
  radial-gradient(520px 300px at 95% 100%, rgba(240,36,126,.06), transparent 60%),
  radial-gradient(480px 300px at 50% 50%, rgba(255,180,0,.04), transparent 65%),
  var(--zemin)}

/* İç sayfa başlıkları: koyu zemin + canlı renk lekeleri */
.sayfa-basi{background-image:
  radial-gradient(420px 260px at 15% 0%, rgba(240,36,126,.22), transparent 60%),
  radial-gradient(420px 260px at 85% 100%, rgba(30,124,240,.20), transparent 60%),
  radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.6px);
  background-size:auto,auto,22px 22px}

/* Sayaç renkleri (koyu zeminde canlı tonlar) */
.sayi:nth-child(1) h3{color:#ff5fa8}
.sayi:nth-child(2) h3{color:#6eb1ff}
.sayi:nth-child(3) h3{color:#ffd166}
.sayi:nth-child(4) h3{color:#8ee06e}

/* Sektör bandı ayraç renkleri */
.bant b:nth-of-type(3n+1){color:#ff5fa8}
.bant b:nth-of-type(3n+2){color:#ffd166}
.bant b:nth-of-type(3n){color:#6eb1ff}

/* CTA bandı: pembe-turuncu canlı geçiş */
.cta-bant{background:linear-gradient(120deg,#e91e7d,#ff8a1e)}
.cta-bant p{color:#ffe3ef}
.cta-bant .dugme{color:#e91e7d}

/* Kategori renkleri (yeni palet) */
.katalog-kart[data-grup="susleme"]::before{background:var(--turuncu)}
.katalog-kart[data-grup="susleme"] .etiket{background:var(--turuncu-acik);color:#d06a05}
.katalog-kart[data-grup="folyo"] .etiket{background:var(--sari-acik);color:#b97e10}
.filtre[data-filtre="hepsi"]::before{background:linear-gradient(90deg,#e91e7d,#ffb400,#1e7cf0)}
.filtre[data-filtre="susleme"]::before{background:var(--turuncu)}

/* Zaman çizelgesi (yeni palet) */
.cizelge-madde:nth-child(4)::before{background:var(--yesil);box-shadow:0 0 0 2px var(--yesil)}
.cizelge-madde:nth-child(4) h3{color:var(--yesil)}

/* İletişim kartlarına renkli sol kenar */
.iletisim-satir{border-left:4px solid var(--kirmizi)}
.iletisim-satir:nth-child(2){border-left-color:var(--yesil)}
.iletisim-satir:nth-child(3){border-left-color:var(--mavi)}
.iletisim-satir:nth-child(4){border-left-color:var(--sari)}
.iletisim-satir:nth-child(5){border-left-color:var(--turuncu)}

/* Simge renk sınıfları (yeni palet) */
.simge-amber{background:var(--sari-acik) !important;color:#c78c00 !important}
.simge-teal{background:var(--yesil-acik) !important;color:var(--yesil) !important}
.simge-indigo{background:var(--turuncu-acik) !important;color:var(--turuncu) !important}

/* İlerleme çubuğu: tam logo paleti */
.ilerleme{background:linear-gradient(90deg,#e91e7d,#ffb400,#1e7cf0,#ff8a1e,#5cb724)}

/* Menü hover çizgisi pembe kalır, CTA pembe */
.menu a.menu-cta{background:linear-gradient(120deg,#e91e7d,#ff5fa8)}
.menu a.menu-cta:hover{background:linear-gradient(120deg,#c01367,#e91e7d)}

/* ============================================================
   v4.1 — Koyu bölümler renkleniyor + büyük logo + yeni iletişim
   ============================================================ */
:root{--gece1:#2a1447;--gece2:#122052;--gece3:#3a1233}

/* Siyah yerine: derin "gece" gradyanı + yavaşça gezinen renk ışıkları */
.ust-serit{background:linear-gradient(90deg,var(--gece3),var(--gece1) 45%,var(--gece2));color:#c5c9e6}
.ust-serit a{color:#eceefb}
.bolum-koyu,.sayfa-basi{
  background:
    radial-gradient(560px 340px at 12% 10%, rgba(240,36,126,.22), transparent 60%),
    radial-gradient(520px 320px at 88% 20%, rgba(30,124,240,.20), transparent 60%),
    radial-gradient(520px 340px at 50% 105%, rgba(255,138,30,.14), transparent 60%),
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.6px),
    linear-gradient(135deg,var(--gece1),var(--gece2));
  background-size:200% 200%,200% 200%,200% 200%,22px 22px,100% 100%;
  animation:gecenefes 18s ease-in-out infinite alternate}
.alt-bilgi{
  background:
    radial-gradient(620px 380px at 8% 0%, rgba(240,36,126,.16), transparent 60%),
    radial-gradient(560px 340px at 92% 30%, rgba(30,124,240,.15), transparent 60%),
    radial-gradient(480px 300px at 40% 110%, rgba(92,183,36,.10), transparent 60%),
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1.6px),
    linear-gradient(150deg,#1e0f35,var(--gece2));
  background-size:200% 200%,200% 200%,200% 200%,22px 22px,100% 100%;
  animation:gecenefes 22s ease-in-out infinite alternate;
  color:#c3c8e8}
@keyframes gecenefes{from{background-position:0% 0%,100% 0%,50% 100%,0 0,0 0}to{background-position:100% 60%,0% 80%,20% 40%,0 0,0 0}}
.bant{background:linear-gradient(90deg,var(--gece1),var(--gece2) 60%,var(--gece3))}
.bant span{color:#c5c9e6}
.bolum-koyu p{color:#c5c9e6}
.sayfa-basi p{color:#c5c9e6}
.sayfa-basi .yol,.sayfa-basi .yol a{color:#9ba1cf}
.sayfa-basi .yol a:hover{color:#fff}
.alt-bilgi a{color:#c3c8e8}
.alt-bilgi a:hover{color:#fff}
.telif{color:#8d93c4;border-top-color:rgba(255,255,255,.12)}

/* Logo: büyük ve belirgin */
.ust-bar .kapsayici{height:102px}
.logo img{height:80px}
.ust-bar.kucuk .kapsayici{height:76px}
.ust-bar.kucuk .logo img{height:58px}
.alt-bilgi .logo-beyaz{height:96px;margin-bottom:18px}

/* Hero görseli: gerçek logo, ışık halesiyle */
.hero-logo-sarici{position:relative;display:flex;align-items:center;justify-content:center;padding:30px}
.hero-logo-sarici::before{content:"";position:absolute;width:120%;padding-top:120%;border-radius:50%;background:radial-gradient(circle, rgba(240,36,126,.14), rgba(255,180,0,.10) 45%, transparent 70%)}
.hero-logo{position:relative;max-width:360px;width:100%;filter:drop-shadow(0 24px 40px rgba(42,20,71,.25))}

/* Yeni iletişim: hızlı eylem kartları */
.hizli-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:28px}
.hizli-kart{position:relative;overflow:hidden;border-radius:var(--yuvarlak);padding:36px 28px;text-align:center;color:#fff;box-shadow:var(--golge-1);transition:transform var(--gecis),box-shadow var(--gecis)}
.hizli-kart::before{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.12)}
.hizli-kart:hover{transform:translateY(-6px);box-shadow:var(--golge-2);color:#fff}
.hizli-kart .buyuk-ikon{font-size:2.3rem;margin-bottom:12px}
.hizli-kart h3{color:#fff;margin-bottom:6px}
.hizli-kart p{color:rgba(255,255,255,.85);font-size:.9rem;margin-bottom:14px}
.hizli-kart .deger{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:9px 20px;font-weight:700;font-size:.95rem;transition:background var(--gecis)}
.hizli-kart:hover .deger{background:rgba(255,255,255,.3)}
.hizli-tel{background:linear-gradient(135deg,#e91e7d,#ff5fa8)}
.hizli-wa{background:linear-gradient(135deg,#1faa4e,#25d366)}
.hizli-mail{background:linear-gradient(135deg,#1e7cf0,#5ea4ff)}

/* Bilgi kartları + geniş harita */
.bilgi-izgara{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:28px}
.bilgi-kart{background:rgba(255,255,255,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--cizgi);border-radius:var(--yuvarlak);padding:28px 30px;box-shadow:var(--golge-1);transition:transform var(--gecis),box-shadow var(--gecis)}
.bilgi-kart:hover{transform:translateY(-4px);box-shadow:var(--golge-2)}
.bilgi-kart .ust{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.bilgi-kart .simge{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.bilgi-kart p{color:var(--gri)}
.harita-sarici{position:relative;border-radius:var(--yuvarlak);overflow:hidden;box-shadow:var(--golge-1)}
.harita-sarici .harita{height:420px;border-radius:0;box-shadow:none;display:block}
.harita-sarici .harita-etiket{position:absolute;left:20px;bottom:20px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-radius:12px;padding:14px 20px;box-shadow:var(--golge-2);font-weight:700;color:var(--antrasit);font-size:.92rem}
.harita-sarici .harita-etiket small{display:block;font-weight:500;color:var(--gri);margin-top:2px}

@media (max-width:960px){
  .hizli-izgara{grid-template-columns:1fr}
  .bilgi-izgara{grid-template-columns:1fr}
  .hero-logo{max-width:260px}
}
@media (max-width:640px){
  .ust-bar .kapsayici{height:84px}
  .logo img{height:62px}
  .ust-bar.kucuk .kapsayici{height:70px}
  .ust-bar.kucuk .logo img{height:52px}
}

/* ============================================================
   v5 — Nihai logo paleti (pembe·turuncu·mor·yeşil·mavi)
   ============================================================ */
:root{
  --kirmizi:#f0247e; --kirmizi-koyu:#cf1268; --kirmizi-acik:#fde9f3;
  --turuncu:#f7941e; --turuncu-acik:#fef1e0;
  --mor:#7b2fbe; --mor-acik:#f1e8fb;
  --yesil:#6cbf1f; --yesil-acik:#eef8e2;
  --mavi:#1e90ff; --mavi-acik:#e6f2ff;
  --sari:#f7941e; --sari-acik:#fef1e0;
  --amber:#f7941e; --amber-acik:#fef1e0;
  --teal:#6cbf1f; --teal-acik:#eef8e2;
  --indigo:#7b2fbe; --indigo-acik:#f1e8fb;
  --gece1:#341454; --gece2:#14245e; --gece3:#4a1240;
}

/* Süsleme kategorisi artık mor */
.katalog-kart[data-grup="susleme"]::before{background:var(--mor)}
.katalog-kart[data-grup="susleme"] .etiket{background:var(--mor-acik);color:var(--mor)}
.filtre[data-filtre="susleme"]::before{background:var(--mor)}
.iletisim-satir:nth-child(5){border-left-color:var(--mor)}
.simge-indigo{background:var(--mor-acik) !important;color:var(--mor) !important}

/* Gökkuşağı çizgileri logodaki 5 renge */
.ust-bar::after{background:linear-gradient(90deg,#f0247e,#f7941e,#7b2fbe,#6cbf1f,#1e90ff)}
.ilerleme{background:linear-gradient(90deg,#f0247e,#f7941e,#7b2fbe,#6cbf1f,#1e90ff)}
.filtre[data-filtre="hepsi"]::before{background:linear-gradient(90deg,#f0247e,#f7941e,#1e90ff)}

/* Koyu bölüm ışıkları: pembe + mavi + mor */
.bolum-koyu,.sayfa-basi{
  background:
    radial-gradient(560px 340px at 12% 10%, rgba(240,36,126,.24), transparent 60%),
    radial-gradient(520px 320px at 88% 20%, rgba(30,144,255,.20), transparent 60%),
    radial-gradient(520px 340px at 50% 105%, rgba(123,47,190,.22), transparent 60%),
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.6px),
    linear-gradient(135deg,var(--gece1),var(--gece2));
  background-size:200% 200%,200% 200%,200% 200%,22px 22px,100% 100%;
  animation:gecenefes 18s ease-in-out infinite alternate}
.alt-bilgi{
  background:
    radial-gradient(620px 380px at 8% 0%, rgba(240,36,126,.18), transparent 60%),
    radial-gradient(560px 340px at 92% 30%, rgba(30,144,255,.16), transparent 60%),
    radial-gradient(480px 300px at 40% 110%, rgba(108,191,31,.12), transparent 60%),
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1.6px),
    linear-gradient(150deg,#241040,var(--gece2));
  background-size:200% 200%,200% 200%,200% 200%,22px 22px,100% 100%;
  animation:gecenefes 22s ease-in-out infinite alternate}

/* Sayaç ve bant renkleri (canlı tonlar) */
.sayi:nth-child(1) h3{color:#ff64ab}
.sayi:nth-child(2) h3{color:#5db2ff}
.sayi:nth-child(3) h3{color:#ffb45c}
.sayi:nth-child(4) h3{color:#96e05a}
.bant b:nth-of-type(3n+1){color:#ff64ab}
.bant b:nth-of-type(3n+2){color:#ffb45c}
.bant b:nth-of-type(3n){color:#5db2ff}

/* CTA ve düğmeler: pembe→turuncu */
.cta-bant{background:linear-gradient(120deg,#f0247e,#f7941e)}
.cta-bant .dugme{color:#f0247e}
.menu a.menu-cta{background:linear-gradient(120deg,#f0247e,#ff64ab)}
.menu a.menu-cta:hover{background:linear-gradient(120deg,#cf1268,#f0247e)}
.hizli-tel{background:linear-gradient(135deg,#f0247e,#ff64ab)}
.hizli-mail{background:linear-gradient(135deg,#1e90ff,#5db2ff)}

/* Hero halesi yeni palete */
.hero-logo-sarici::before{background:radial-gradient(circle, rgba(240,36,126,.14), rgba(123,47,190,.10) 45%, transparent 70%)}
.hero{background:
  radial-gradient(640px 420px at 12% 8%, rgba(240,36,126,.09), transparent 60%),
  radial-gradient(560px 380px at 88% 18%, rgba(30,144,255,.08), transparent 60%),
  radial-gradient(620px 420px at 55% 100%, rgba(247,148,30,.10), transparent 65%),
  linear-gradient(180deg,#fff 0%,var(--zemin) 100%);
  background-size:200% 200%;animation:nefes 16s ease-in-out infinite alternate}

/* Zaman çizelgesi 3. madde turuncu kalsın, 2. mavi, 4. yeşil (güncel tonlar otomatik) */

/* ============================================================
   v5.1 — Yeni header (açılır menü + sosyal) ve yeni footer
   ============================================================ */

/* Üst şerit: sosyal ikonlar */
.ust-serit .sag{display:flex;align-items:center;gap:14px}
.serit-sosyal{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-size:.68rem;font-weight:800;letter-spacing:.5px;color:#fff !important;transition:background var(--gecis),transform var(--gecis)}
.serit-sosyal:hover{background:linear-gradient(135deg,#f0247e,#7b2fbe);transform:translateY(-1px)}
.serit-ayrac{width:1px;height:16px;background:rgba(255,255,255,.2)}

/* Açılır ürün menüsü */
.acilir{position:relative}
.acilir-panel{position:absolute;top:100%;left:0;min-width:230px;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border:1px solid var(--cizgi);border-radius:14px;box-shadow:var(--golge-2);padding:10px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity var(--gecis),transform var(--gecis),visibility var(--gecis);z-index:55}
.acilir:hover .acilir-panel,.acilir:focus-within .acilir-panel{opacity:1;visibility:visible;transform:none}
.acilir-panel a{display:flex;align-items:center;padding:11px 14px;border-radius:10px;font-size:.92rem}
.acilir-panel a::after{display:none}
.acilir-panel a:hover{background:var(--zemin)}
.acilir-panel i{width:9px;height:9px;border-radius:50%;background:var(--nk,#f0247e);margin-right:11px;flex:0 0 auto}

/* Güven rozetleri şeridi (hero altı) */
.rozet-serit{padding:26px 0;background:#fff;border-bottom:1px solid var(--cizgi)}
.rozet-akis{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.guven-rozet{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.8);backdrop-filter:blur(6px);border:1px solid var(--cizgi);border-radius:999px;padding:11px 22px;font-weight:600;font-size:.9rem;color:var(--antrasit);box-shadow:var(--golge-1);transition:transform var(--gecis),box-shadow var(--gecis)}
.guven-rozet:hover{transform:translateY(-3px);box-shadow:var(--golge-2)}
.guven-rozet b{font-size:1.05rem}

/* Yeni footer düzeni */
.alt-bilgi{position:relative}
.alt-bilgi::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f0247e,#f7941e,#7b2fbe,#6cbf1f,#1e90ff)}
.alt-ust{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:32px;margin-bottom:40px}
.alt-marka{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.alt-marka p{max-width:340px}
.sosyal{display:flex;gap:12px}
.sosyal a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-weight:800;font-size:.85rem;color:#fff !important;padding:0 !important;transition:background var(--gecis),transform var(--gecis)}
.sosyal a:hover{transform:translateY(-3px);padding-left:0 !important}
.sosyal a:nth-child(1):hover{background:linear-gradient(135deg,#f0247e,#7b2fbe)}
.sosyal a:nth-child(2):hover{background:#1e90ff}
.sosyal a:nth-child(3):hover{background:#25d366}
.alt-izgara{grid-template-columns:repeat(3,1fr)}
.alt-bilgi h3{position:relative;padding-bottom:10px}
.alt-bilgi h3::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:3px;border-radius:3px;background:linear-gradient(90deg,#f0247e,#f7941e)}
.telif .nokta-dizi{display:inline-flex;gap:5px;margin:0 8px;vertical-align:middle}
.telif .nokta-dizi i{width:7px;height:7px;border-radius:50%}

@media (max-width:960px){.alt-izgara{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .alt-izgara{grid-template-columns:1fr}
  .alt-ust{justify-content:center;text-align:center}
  .alt-marka{justify-content:center}
  .acilir-panel{display:none}
  .rozet-akis{gap:10px}
  .guven-rozet{padding:10px 16px;font-size:.84rem}
}

/* ============================================================
   v6 — Marka dokunuşları: baloncuklar, degrade başlıklar, vitrin
   ============================================================ */

/* Hero'da logodaki gibi süzülen parlak baloncuklar */
.baloncuk{position:absolute;border-radius:50%;opacity:.55;pointer-events:none;z-index:0;animation:baloncukYukari linear infinite}
@keyframes baloncukYukari{from{transform:translateY(0)}to{transform:translateY(-115vh)}}
.baloncuk-pembe{background:radial-gradient(circle at 32% 28%, #ff8fc2, #f0247e 65%)}
.baloncuk-mavi{background:radial-gradient(circle at 32% 28%, #8cc6ff, #1e90ff 65%)}
.baloncuk-yesil{background:radial-gradient(circle at 32% 28%, #b6e88a, #6cbf1f 65%)}
.baloncuk-turuncu{background:radial-gradient(circle at 32% 28%, #ffc784, #f7941e 65%)}
.baloncuk-mor{background:radial-gradient(circle at 32% 28%, #c49aec, #7b2fbe 65%)}
.baloncuk::after{content:"";position:absolute;left:26%;top:18%;width:26%;height:30%;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(1px)}

/* Bölüm başlıklarının altında mini gökkuşağı çizgisi */
.bolum-baslik::after{content:"";display:block;width:64px;height:6px;border-radius:6px;margin:18px auto 0;background:linear-gradient(90deg,#f0247e,#f7941e,#7b2fbe,#6cbf1f,#1e90ff)}

/* Vurgu kelimeler degrade renkli */
.hero h1 em{background:linear-gradient(120deg,#f0247e,#7b2fbe);-webkit-background-clip:text;background-clip:text;color:transparent}
.degrade-yazi{background:linear-gradient(120deg,#f0247e,#f7941e);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Hero'nun altında yumuşak dalga geçişi */
.hero-dalga{position:absolute;left:0;right:0;bottom:-1px;z-index:1;line-height:0}
.hero-dalga svg{width:100%;height:64px;display:block}

/* Baskılı balon vitrini */
.vitrin{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.vitrin-liste{list-style:none;margin:22px 0 30px}
.vitrin-liste li{position:relative;padding:9px 0 9px 38px;font-weight:600;color:var(--metin)}
.vitrin-liste li b{position:absolute;left:0;top:6px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem}
.vitrin-liste li:nth-child(1) b{background:#f0247e}
.vitrin-liste li:nth-child(2) b{background:#1e90ff}
.vitrin-liste li:nth-child(3) b{background:#f7941e}
.vitrin-liste li:nth-child(4) b{background:#6cbf1f}
.vitrin-gorsel{position:relative;display:flex;justify-content:center}
.vitrin-gorsel::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:115%;padding-top:115%;border-radius:50%;background:radial-gradient(circle, rgba(123,47,190,.12), rgba(240,36,126,.08) 50%, transparent 72%)}
.vitrin-gorsel svg{position:relative;width:100%;max-width:360px}

@media (max-width:960px){
  .vitrin{grid-template-columns:1fr;text-align:center}
  .vitrin-liste{display:inline-block;text-align:left}
  .vitrin-gorsel{order:-1}
  .vitrin-gorsel svg{max-width:250px}
}

/* v6.1 — Vitrin: devasa balon yerine zarif bilgi kartları */
.vitrin-kartlar{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.vitrin-mini{background:#fff;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);padding:24px 22px;box-shadow:var(--golge-1);transition:transform var(--gecis),box-shadow var(--gecis)}
.vitrin-mini:hover{transform:translateY(-4px);box-shadow:var(--golge-2)}
.vitrin-mini svg{width:34px;height:41px;margin-bottom:12px}
.vitrin-mini h4{font-size:.98rem;margin-bottom:5px;color:var(--antrasit)}
.vitrin-mini p{color:var(--gri);font-size:.86rem;line-height:1.55}
@media (max-width:640px){.vitrin-kartlar{grid-template-columns:1fr 1fr;gap:12px}.vitrin-mini{padding:18px 16px}}

/* ============================================================
   v7 — 3B Balon Tasarımcısı
   ============================================================ */
.tasarimci-alan{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:stretch}

.tasarimci-sahne-kutu{position:relative;border-radius:var(--yuvarlak);overflow:hidden;
  background:
    radial-gradient(480px 320px at 30% 20%, rgba(240,36,126,.09), transparent 60%),
    radial-gradient(420px 300px at 80% 80%, rgba(30,144,255,.08), transparent 60%),
    var(--zemin);
  border:1px solid var(--cizgi);box-shadow:var(--golge-1);min-height:440px}
.tasarimci-sahne{width:100%;height:440px;cursor:grab}
.tasarimci-sahne canvas{display:block;outline:none}
.tasarimci-yukleniyor{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--gri);font-weight:600;font-size:.92rem;background:var(--zemin);transition:opacity .3s}
.tasarimci-yedek{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:30px;background:var(--zemin)}
.tasarimci-yedek p{color:var(--gri);max-width:320px;font-size:.9rem}
.tasarimci-ipucu{position:absolute;left:16px;bottom:14px;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:999px;padding:8px 16px;font-size:.8rem;font-weight:600;color:var(--antrasit);box-shadow:var(--golge-1);pointer-events:none}

.tasarimci-panel{display:flex;flex-direction:column;gap:26px}
.tasarimci-blok h4{font-size:.95rem;margin-bottom:14px;color:var(--antrasit)}

.renk-paleti{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.renk-secim{width:42px;height:42px;border-radius:50%;background:var(--rk);border:none;box-shadow:var(--golge-1);cursor:pointer;transition:transform var(--gecis),box-shadow var(--gecis);position:relative}
.renk-secim:hover{transform:translateY(-3px) scale(1.06)}
.renk-secim.secili{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--rk),var(--golge-1)}
.renk-ozel{width:42px;height:42px;border-radius:50%;position:relative;cursor:pointer;box-shadow:var(--golge-1);display:flex;align-items:center;justify-content:center;
  background:conic-gradient(from 0deg,#f0247e,#f7941e,#ffd166,#6cbf1f,#1e90ff,#7b2fbe,#f0247e);transition:transform var(--gecis)}
.renk-ozel:hover{transform:translateY(-3px) scale(1.06)}
.renk-ozel input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;border:none;padding:0}
.renk-ozel span{color:#fff;font-weight:800;font-size:1.05rem;text-shadow:0 1px 3px rgba(0,0,0,.35);pointer-events:none}

.logo-birak-alani{border:2px dashed var(--cizgi);border-radius:var(--yuvarlak);padding:26px 18px;text-align:center;cursor:pointer;transition:border-color var(--gecis),background var(--gecis)}
.logo-birak-alani:hover,.logo-birak-alani.surukleniyor{border-color:var(--kirmizi);background:var(--kirmizi-acik)}
.logo-birak-ikon{font-size:1.5rem;display:block;margin-bottom:8px}
.logo-birak-alani p{font-size:.9rem;color:var(--metin);margin-bottom:4px}
.logo-birak-not{font-size:.76rem;color:var(--gri)}
.logo-alt-satir{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:10px}
.logo-durum{font-size:.82rem;color:var(--gri);flex:1}
.logo-durum.hata{color:var(--kirmizi);font-weight:600}
.logo-kaldir-btn{background:none;border:none;color:var(--gri);font-size:.82rem;font-weight:600;text-decoration:underline;cursor:pointer;white-space:nowrap;padding:0}
.logo-kaldir-btn:hover{color:var(--kirmizi)}

.tasarimci-eylemler{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.tasarimci-eylemler .dugme-cerceve{margin-left:0}

.hizli-tasarim-link{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.7);backdrop-filter:blur(6px);border:1px dashed rgba(240,36,126,.4);border-radius:999px;padding:9px 18px;font-weight:700;font-size:.85rem;color:var(--kirmizi);transition:background var(--gecis),transform var(--gecis)}
.hizli-tasarim-link:hover{background:var(--kirmizi-acik);transform:translateY(-2px);color:var(--kirmizi)}

@media (max-width:960px){
  .tasarimci-alan{grid-template-columns:1fr}
  .tasarimci-sahne,.tasarimci-sahne-kutu{height:360px;min-height:360px}
}
@media (max-width:640px){
  .tasarimci-sahne,.tasarimci-sahne-kutu{height:320px;min-height:320px}
  .renk-secim,.renk-ozel{width:38px;height:38px}
}

/* ============================================================
   v8 — CSS-tabanlı 3B balon (WebGL/dış kütüphane GEREKMEZ)
   ============================================================ */
.tasarimci-sahne{display:flex;align-items:center;justify-content:center;perspective:1100px;overflow:hidden}
.p3d-grup{position:relative;width:230px;height:340px;transform-style:preserve-3d;cursor:grab;will-change:transform;transition:transform .05s linear}
.p3d-grup.tutuluyor{cursor:grabbing;transition:none}
.p3d-katman{position:absolute;inset:0;transform-style:preserve-3d}
.p3d-govde{transform:translateZ(0)}
.p3d-govde svg{width:100%;height:100%;display:block;filter:drop-shadow(0 24px 26px rgba(20,10,40,.20))}
.p3d-parlak{border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at var(--ix,34%) var(--iy,24%), rgba(255,255,255,.5), transparent 42%)}
.p3d-logo-pencere{position:absolute;left:7%;top:3%;width:86%;height:68%;
  border-radius:46%;overflow:hidden;opacity:0;transition:opacity .3s;pointer-events:none}
.p3d-logo-pencere.gorunur{opacity:1;pointer-events:auto}
.p3d-logo-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (max-width:960px){.p3d-grup{width:190px;height:281px}}
@media (max-width:640px){.p3d-grup{width:170px;height:251px}}

/* Logo kontrol paneli: boyut kaydırıcı + ortala */
.logo-kontrol{display:flex;align-items:center;gap:16px;margin-top:14px;flex-wrap:wrap}
.logo-kontrol-etiket{display:flex;align-items:center;gap:10px;font-size:.84rem;font-weight:600;color:var(--antrasit)}
.logo-kontrol-etiket input[type=range]{width:130px;accent-color:var(--kirmizi);cursor:pointer}
#logo-boyut-deger{font-variant-numeric:tabular-nums;color:var(--gri);min-width:38px;display:inline-block}
.logo-ortala-btn{background:var(--zemin);border:1px solid var(--cizgi);border-radius:8px;padding:7px 14px;
  font-size:.82rem;font-weight:600;color:var(--antrasit);cursor:pointer;transition:background var(--gecis),border-color var(--gecis),color var(--gecis)}
.logo-ortala-btn:hover{border-color:var(--kirmizi);color:var(--kirmizi)}
.logo-surukle-notu{font-size:.78rem;color:var(--gri);margin-top:10px}

/* Sürüm rozeti — sadece önbellek kontrolü için, kalıcı */
.tasarimci-surum{position:absolute;right:14px;bottom:14px;font-size:.68rem;color:#b6bac6;
  background:rgba(255,255,255,.7);padding:3px 9px;border-radius:999px;pointer-events:none}

/* ============================================================
   v25 — Mobil uyumluluk düzeltmeleri + gerçek sosyal ikonlar
   ============================================================ */

/* Sosyal ikonlar artık SVG (metin değil) */
.serit-sosyal svg{width:13px;height:13px;display:block}
.sosyal a svg{width:20px;height:20px;display:block}

/* Dokunma vurgusunu kaldır (mobilde mavi flaş olmasın) */
a,button{-webkit-tap-highlight-color:transparent}

@media (max-width:640px){
  /* --- SORUN 1 ÇÖZÜMÜ: Mobil menü artık koyu "gece" zemininde, tam kontrastlı --- */
  .menu{
    background:
      radial-gradient(420px 300px at 15% 10%, rgba(240,36,126,.25), transparent 60%),
      radial-gradient(420px 300px at 85% 90%, rgba(30,144,255,.22), transparent 60%),
      radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.6px),
      linear-gradient(150deg,var(--gece1),var(--gece2));
    background-size:200% 200%,200% 200%,22px 22px,100% 100%;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .menu a{color:#fff;font-weight:700;min-height:48px;display:flex;align-items:center;justify-content:center}
  .menu a::after{background:linear-gradient(90deg,#f0247e,#ffb45c,#5db2ff)}
  .menu a.aktif{color:#ff8fc2}
  .menu a.menu-cta{background:linear-gradient(120deg,#f0247e,#ff64ab);min-width:220px}
  /* --- SORUN 2 ÇÖZÜMÜ: menü açıkken hamburger (X) beyaz olur, koyu zeminde görünür --- */
  .hamburger.acik span{background:#fff}
  /* Açılır ürün paneli mobilde gizli; ok işareti kafa karıştırmasın */
  .acilir > a::before{content:""}
  /* --- SORUN 3 ÇÖZÜMÜ: üst şerit dar ekranda taşmasın --- */
  .ust-serit{font-size:.76rem}
  .ust-serit .sol{gap:12px}
  /* Dokunma hedefleri: filtre ve renk düğmeleri min 44px */
  .filtre{min-height:44px}
  .renk-secim,.renk-ozel{width:44px;height:44px}
  /* Tasarımcı eylem düğmeleri tam genişlik, alt alta rahat */
  .tasarimci-eylemler{flex-direction:column}
  .tasarimci-eylemler .dugme{text-align:center}
  /* Yorum okları küçük ekranda kartın içine tam otursun */
  .yorum-ok{width:38px;height:38px}
}
@media (max-width:420px){
  /* Çok dar ekranda e-posta gizle, sadece telefon kalsın */
  .ust-serit .sol a:nth-child(2){display:none}
}

/* ============================================================
   v27 — Mobil: üst şerit tek satır, header'a Ara düğmesi,
   menü üst üste binme sorununun KÖK çözümü
   ============================================================ */

/* Mobil "Hemen Ara" düğmesi (masaüstünde gizli) */
.mobil-ara{display:none}

@media (max-width:640px){
  /* --- KÖK ÇÖZÜM: header'daki blur efekti, içindeki tam-ekran menüyü kendi
     kutusuna hapsediyordu (CSS containing-block davranışı). Mobilde blur'u
     kaldırıp düz beyaz yapıyoruz -> menü gerçekten tüm ekranı kaplar. --- */
  .ust-bar{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  .menu{z-index:120}
  .hamburger{z-index:130}

  /* --- Üst şerit: tek satır, sıkışma yok --- */
  .ust-serit .kapsayici{height:38px;flex-wrap:nowrap;gap:10px}
  .ust-serit .sol{flex:1;min-width:0}
  .ust-serit .sol a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ust-serit .sol a:nth-child(2){display:none}          /* e-posta gizli */
  .ust-serit .sag{display:flex;flex:0 0 auto}
  .ust-serit .sag > span{display:none}                   /* kamyon yazısı + ayraç gizli */

  /* --- Logo ile hamburger arasındaki boşluğa: Hemen Ara düğmesi --- */
  .mobil-ara{display:inline-flex;align-items:center;gap:7px;
    margin-left:auto;margin-right:12px;
    background:linear-gradient(120deg,#f0247e,#ff64ab);color:#fff;
    font-weight:700;font-size:.84rem;padding:10px 16px;border-radius:999px;
    box-shadow:0 6px 16px rgba(240,36,126,.35);white-space:nowrap}
  .mobil-ara:hover{color:#fff}
  .ust-bar .kapsayici{gap:0}
}

/* ============================================================
   v28 — İpli uçan balonlar + dolu header/üst şerit düzeni
   ============================================================ */

/* Uçan ipli balonlar (yuvarlak topların yerine) */
.ucan-balon{position:absolute;bottom:-150px;pointer-events:none;z-index:0;opacity:.75;
  animation:baloncukYukari linear infinite}
.ucan-balon svg{display:block;width:100%;height:auto}

/* Üst şerit: 3 bölge — sol iletişim, ORTA bilgi, sağ ikonlar */
.ust-serit .orta{color:#c5c9e6;white-space:nowrap;display:flex;align-items:center;gap:10px}
.ust-serit .orta .nokta{color:#ff64ab}

/* Header: logo | ortalanmış menü | sağda telefon + Teklif */
.ust-bar nav{margin:0 auto}
.ust-eylem{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.tel-cip{display:inline-flex;align-items:center;gap:8px;background:var(--zemin);
  border:1px solid var(--cizgi);border-radius:999px;padding:9px 16px;
  font-weight:700;font-size:.88rem;color:var(--antrasit);white-space:nowrap;
  transition:border-color var(--gecis),color var(--gecis),transform var(--gecis)}
.tel-cip:hover{border-color:var(--kirmizi);color:var(--kirmizi);transform:translateY(-1px)}
.tel-cip svg{width:15px;height:15px;fill:var(--kirmizi)}
.ust-eylem .menu-cta-btn{background:linear-gradient(120deg,#f0247e,#ff64ab);color:#fff;
  border-radius:10px;padding:12px 22px;font-weight:700;font-size:.95rem;white-space:nowrap;
  transition:transform var(--gecis),box-shadow var(--gecis)}
.ust-eylem .menu-cta-btn:hover{color:#fff;transform:translateY(-2px);box-shadow:var(--golge-2)}

/* Menü içindeki eski Teklif Alın masaüstünde gizli (sağdaki yeni düğme var),
   mobil menüde görünmeye devam eder */
@media (min-width:641px){
  .menu a.menu-cta{display:none}
}
@media (max-width:960px){
  .ust-serit .orta{display:none}
  .ust-eylem .tel-cip{display:none}
}
@media (max-width:640px){
  .ust-eylem{display:none}
  .ust-serit .orta{display:none}
}

/* ============================================================
   v29 — GECE MODU + DİL SEÇİCİ
   ============================================================ */

/* --- Gece teması: değişken tabanlı --- */
[data-tema="gece"]{
  --zemin:#131a2b; --metin:#e8eaf3; --gri:#a6acc4; --cizgi:#2a3350;
  --kirmizi-acik:rgba(240,36,126,.16);
  --mavi-acik:rgba(30,144,255,.16);
  --sari-acik:rgba(255,180,0,.16); --amber-acik:rgba(255,180,0,.16);
  --turuncu-acik:rgba(255,138,30,.16); --indigo-acik:rgba(123,47,190,.18);
  --yesil-acik:rgba(108,191,31,.16); --teal-acik:rgba(108,191,31,.16);
  --mor-acik:rgba(123,47,190,.18);
  --golge-1:0 4px 16px rgba(0,0,0,.35); --golge-2:0 14px 34px rgba(0,0,0,.5);
  color-scheme:dark;
}
[data-tema="gece"] body{background:#0e1424;color:var(--metin)}
[data-tema="gece"] h1,[data-tema="gece"] h2,[data-tema="gece"] h3,[data-tema="gece"] h4{color:#f2f4fb}
[data-tema="gece"] .ust-bar{background:rgba(15,21,38,.9);border-bottom-color:var(--cizgi)}
[data-tema="gece"] .menu a{color:#e8eaf3}
[data-tema="gece"] .hamburger span{background:#e8eaf3}
[data-tema="gece"] .acilir-panel{background:rgba(20,27,46,.97);border-color:var(--cizgi)}
[data-tema="gece"] .acilir-panel a:hover{background:#1b2440}
[data-tema="gece"] .hero{background:
  radial-gradient(640px 420px at 12% 8%, rgba(240,36,126,.14), transparent 60%),
  radial-gradient(560px 380px at 88% 18%, rgba(30,144,255,.12), transparent 60%),
  linear-gradient(180deg,#0e1424 0%,#131a2b 100%)}
[data-tema="gece"] .hero .rozet{background:rgba(20,27,46,.8);border-color:rgba(240,36,126,.35)}
[data-tema="gece"] .hero-dalga svg path{fill:#0e1424}
[data-tema="gece"] .rozet-serit{background:#0e1424;border-bottom-color:var(--cizgi)}
[data-tema="gece"] .guven-rozet{background:rgba(24,32,58,.85);border-color:var(--cizgi);color:var(--metin)}
[data-tema="gece"] .bolum-zemin{background:
  radial-gradient(560px 320px at 8% 0%, rgba(30,144,255,.08), transparent 60%),
  radial-gradient(520px 300px at 95% 100%, rgba(240,36,126,.08), transparent 60%),
  var(--zemin)}
[data-tema="gece"] .kart,[data-tema="gece"] .katalog-kart,[data-tema="gece"] .vitrin-mini,
[data-tema="gece"] .yorum,[data-tema="gece"] .sss-madde,[data-tema="gece"] .pencere{
  background:#18203a;border-color:var(--cizgi)}
[data-tema="gece"] .katalog-kart .gorsel,[data-tema="gece"] .pencere-gorsel{
  background:linear-gradient(135deg,#1b2440,#131a2b);border-color:var(--cizgi)}
[data-tema="gece"] .filtre{background:#18203a;border-color:var(--cizgi);color:var(--metin)}
[data-tema="gece"] .yorum-ok,[data-tema="gece"] .yukari{background:#18203a;border-color:var(--cizgi);color:var(--metin)}
[data-tema="gece"] .pencere-kapat{background:rgba(24,32,58,.9);color:var(--metin)}
[data-tema="gece"] .iletisim-satir,[data-tema="gece"] .bilgi-kart{background:rgba(24,32,58,.85);border-color:var(--cizgi)}
[data-tema="gece"] .harita-sarici .harita-etiket,[data-tema="gece"] .tasarimci-ipucu,
[data-tema="gece"] .tasarimci-surum{background:rgba(20,27,46,.9);color:var(--metin)}
[data-tema="gece"] .logo-birak-alani{border-color:var(--cizgi)}
[data-tema="gece"] .logo-birak-alani p{color:var(--metin)}
[data-tema="gece"] .dugme-cerceve{border-color:#e8eaf3;color:#e8eaf3}
[data-tema="gece"] .dugme-cerceve:hover{background:#e8eaf3;color:#131a2b}
[data-tema="gece"] .tasarimci-sahne-kutu{border-color:var(--cizgi)}
[data-tema="gece"] .logo-ortala-btn{background:#18203a;border-color:var(--cizgi);color:var(--metin)}
[data-tema="gece"] .vitrin-liste li{color:var(--metin)}
@media (max-width:640px){
  [data-tema="gece"] .ust-bar{background:#0f1526}
}

/* --- Tema düğmesi + dil seçici (üst şeritte) --- */
.dil-tema{display:flex;align-items:center;gap:8px;margin-left:4px}
.tema-dugme{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);cursor:pointer;font-size:.8rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background var(--gecis),transform var(--gecis)}
.tema-dugme:hover{background:rgba(255,255,255,.22);transform:translateY(-1px)}
.tema-dugme .ikon-gunes{display:none}
[data-tema="gece"] .tema-dugme .ikon-gunes{display:block}
[data-tema="gece"] .tema-dugme .ikon-ay{display:none}

.dil-secici{position:relative}
.dil-btn{display:flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);color:#fff;border-radius:999px;padding:5px 10px;
  font-size:.74rem;font-weight:700;cursor:pointer;transition:background var(--gecis)}
.dil-btn:hover{background:rgba(255,255,255,.22)}
.dil-btn svg,.dil-panel svg{width:18px;height:13px;border-radius:2px;display:block;flex:0 0 auto}
.dil-btn .ok{font-size:.6rem;opacity:.8}
.dil-panel{position:absolute;right:0;top:calc(100% + 10px);min-width:170px;
  background:#fff;border:1px solid var(--cizgi);border-radius:12px;box-shadow:var(--golge-2);
  padding:6px;z-index:300;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--gecis),transform var(--gecis),visibility var(--gecis)}
.dil-panel.acik{opacity:1;visibility:visible;transform:none}
.dil-panel button{display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;
  padding:9px 12px;border-radius:8px;font-size:.85rem;font-weight:600;color:var(--antrasit);
  cursor:pointer;transition:background var(--gecis)}
.dil-panel button:hover{background:var(--zemin)}
.dil-panel button.aktif{background:var(--kirmizi-acik);color:var(--kirmizi)}
[data-tema="gece"] .dil-panel{background:#18203a;border-color:var(--cizgi)}
[data-tema="gece"] .dil-panel button{color:var(--metin)}
[data-tema="gece"] .dil-panel button:hover{background:#1b2440}