/* ============================================================
   NORA Çevre Danışmanlık — Ortak Stil
   Palet, üstbilgi, altbilgi, butonlar, kartlar, iç sayfa hero'su.
   Renkler yalnızca buradaki :root bloğundan yönetilir.
   ============================================================ */

:root{
  /* --- Onaylanan palet (küre provasıyla birebir) --- */
  --zemin:#04100d;
  --kart:#051512;
  --nane:#3ee6a0;
  --nane-koyu:#17b47a;
  --nane-parlak:#a9ffd9;
  --turkuaz:#2fd8b2;
  --metin:#eef8f3;
  --metin-sonuk:#9fc6b8;
  --metin-silik:#5f7f73;
  --cam:rgba(62,230,160,.07);
  --cam-cizgi:rgba(62,230,160,.18);
  --kirmizi:#ff6b81;
  --sari:#ffd479;

  /* --- Ölçü sistemi --- */
  --kenar:72px;          /* sayfa yan boşluğu */
  --azami:1560px;        /* içerik üst sınırı — geniş ekranlarda dağılmayı önler */
  --radius:26px;
  --radius-sm:14px;
  --gecis:.2s ease;
  --dokunma:44px;        /* asgari dokunma hedefi (Apple/Google standardı) */

  /* --- Boşluk ölçeği: 4px tabanlı, tek kaynak ---
     Göz kararı değer yerine bu basamaklar kullanılır.
     Ritim tutarlı olur, bakım tek yerden yapılır. */
  --bo-1:4px;    /* kıl payı: ikon-metin */
  --bo-2:8px;    /* sıkı: rozet arası */
  --bo-3:12px;   /* yakın: liste maddesi */
  --bo-4:16px;   /* standart: kart içi öğe */
  --bo-5:24px;   /* rahat: kart ızgarası */
  --bo-6:32px;   /* ayrık: başlık-içerik */
  --bo-7:48px;   /* bölüm içi blok */
  --bo-8:64px;   /* bölümler arası */
  --bo-9:96px;   /* büyük ayrım: hero-içerik */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{min-height:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--zemin);color:var(--metin);
  overflow-x:hidden;
  display:flex;flex-direction:column;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* Erişilebilirlik: klavye odak halkası */
:focus-visible{outline:2px solid var(--nane);outline-offset:3px;border-radius:6px}
.atla{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--nane);color:#03231a;padding:14px 22px;border-radius:0 0 10px 0;font-weight:600;
  min-height:var(--dokunma);display:flex;align-items:center;
}
.atla:focus{left:0}

/* ---------- Bokeh arka plan ---------- */
.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.blob.b1{width:460px;height:460px;left:-180px;top:-120px;background:#0d3d2e}
.blob.b2{width:380px;height:520px;left:-160px;top:44%;background:#0a2f33}
.blob.b3{width:520px;height:460px;right:-200px;bottom:-160px;background:#0e3f2c}
.blob.b4{width:320px;height:320px;right:-120px;top:-80px;background:#0a2c30}
.bokeh{position:absolute;border-radius:50%;filter:blur(14px);opacity:.25;background:#e9c98f}
.bokeh.k1{width:56px;height:56px;left:6%;top:22%}
.bokeh.k2{width:34px;height:34px;left:12%;top:64%;background:#8fe3c0;opacity:.18}
.bokeh.k3{width:70px;height:70px;right:5%;top:40%;opacity:.14}
.bokeh.k4{width:40px;height:40px;right:12%;bottom:14%;background:#8fe3c0;opacity:.2}

/* ---------- Sayfa kabuğu ---------- */
.page{
  position:relative;z-index:1;flex:1;
  display:flex;flex-direction:column;
  padding:26px var(--kenar) 0;
  width:100%;max-width:calc(var(--azami) + var(--kenar)*2);
  margin-inline:auto;
}
.card{
  position:relative;flex:1;
  background:
    radial-gradient(900px 520px at 68% 30%, rgba(21,74,58,.28), transparent 62%),
    radial-gradient(700px 420px at 12% 12%, rgba(12,52,48,.32), transparent 60%),
    linear-gradient(165deg,#07201a 0%,#04120f 46%,#03100e 100%);
  border:1px solid rgba(62,230,160,.10);
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
}
/* silik NORA filigranı */
.wm{position:absolute;display:flex;align-items:center;gap:10px;opacity:.05;pointer-events:none;z-index:1}
.wm svg{width:34px;height:34px}
.wm span{font-size:26px;font-weight:800;letter-spacing:2px}
.wm.w1{right:6%;top:14%}
.wm.w2{right:8%;bottom:7%}

/* ---------- Üst bar ---------- */
.topbar{
  position:relative;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 36px 0;gap:20px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--metin);flex:none}
.brand svg{width:34px;height:34px}
.brand .name{font-size:25px;font-weight:800;letter-spacing:3px}
.brand .tag{
  font-size:10px;letter-spacing:1.4px;color:var(--metin-silik);
  font-weight:600;line-height:1.3;padding-left:11px;margin-left:1px;
  border-left:1px solid var(--cam-cizgi);
}

.nav-pill{
  display:flex;align-items:center;gap:2px;
  padding:8px 10px 8px 20px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(62,230,160,.14);
  border-radius:999px;backdrop-filter:blur(12px);
}
.nav-pill a{
  color:var(--metin-sonuk);text-decoration:none;font-size:14px;font-weight:500;
  padding:8px 13px;border-radius:999px;transition:color var(--gecis),background var(--gecis);
  white-space:nowrap;
}
.nav-pill a:hover{color:var(--metin);background:rgba(62,230,160,.08)}
.nav-pill a.aktif{color:var(--nane);background:rgba(62,230,160,.10)}
.nav-pill .btn{margin-left:8px}

/* açılır alt menü (Uygulamalar) */
.acilir{position:relative}
.acilir > a::after{
  content:"";display:inline-block;width:5px;height:5px;margin-left:7px;vertical-align:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.7;
}
.acilir-menu{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:230px;padding:8px;
  background:rgba(6,26,21,.96);border:1px solid var(--cam-cizgi);border-radius:16px;
  backdrop-filter:blur(12px);box-shadow:0 18px 44px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.acilir:hover .acilir-menu,
.acilir:focus-within .acilir-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.acilir-menu a{border-radius:10px;padding:9px 13px;font-size:13.5px;text-align:left}

/* mobil menü düğmesi */
.menu-btn{
  display:none;align-items:center;justify-content:center;
  width:var(--dokunma);height:var(--dokunma);border-radius:12px;flex:none;
  background:rgba(62,230,160,.06);border:1px solid var(--cam-cizgi);
  color:var(--metin);cursor:pointer;
}
.menu-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}

/* ---------- Butonlar ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:999px;border:1px solid transparent;
  min-height:var(--dokunma);
  font-size:14.5px;font-weight:600;text-decoration:none;cursor:pointer;font-family:inherit;
  transition:transform .15s, box-shadow var(--gecis), background var(--gecis), color var(--gecis);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn.dolu{
  background:linear-gradient(180deg,#4df0ae,#2fd18d);color:#03231a;
  box-shadow:0 6px 24px rgba(62,230,160,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.dolu:hover{box-shadow:0 8px 30px rgba(62,230,160,.5)}
.btn.cerceve{background:rgba(62,230,160,.04);color:var(--nane);border-color:rgba(62,230,160,.45)}
.btn.cerceve:hover{background:rgba(62,230,160,.1)}
.btn.buyuk{padding:14px 28px;font-size:15px}

/* ---------- İç sayfa hero (küresiz, hafif) ---------- */
.ic-hero{
  position:relative;z-index:2;
  padding:var(--bo-8) var(--kenar) var(--bo-7);
  border-bottom:1px solid rgba(62,230,160,.08);
}
.ic-hero .serit{
  position:absolute;left:0;right:0;top:0;height:100%;
  pointer-events:none;opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);
}
.ic-hero .serit canvas{display:block;width:100%;height:100%}
.ust-etiket{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;letter-spacing:1.8px;font-weight:600;color:var(--nane);
  padding:7px 14px;border:1px solid var(--cam-cizgi);border-radius:999px;
  background:rgba(62,230,160,.05);margin-bottom:var(--bo-5);
}
.ust-etiket .nokta{
  width:6px;height:6px;border-radius:50%;background:var(--nane);
  box-shadow:0 0 10px 2px rgba(62,230,160,.6);animation:nabiz 2.2s infinite;
}
@keyframes nabiz{0%,100%{opacity:1}50%{opacity:.35}}

h1{font-size:clamp(32px,3.4vw,48px);font-weight:700;letter-spacing:-1.2px;line-height:1.14;color:#fff}
h2{font-size:clamp(24px,2.2vw,32px);font-weight:700;letter-spacing:-.6px;line-height:1.25}
h3{font-size:18px;font-weight:600;letter-spacing:-.2px}
.alt-cizgi{
  width:118px;height:3px;border-radius:2px;margin:var(--bo-5) 0;
  background:linear-gradient(90deg,var(--nane),transparent);
  box-shadow:0 0 12px rgba(62,230,160,.5);
}
.giris{font-size:17.5px;line-height:1.65;color:var(--metin-sonuk);max-width:680px}

/* ---------- İçerik bölümleri ----------
   Bölümler yalnızca ÜST boşluk taşır; ardışık bölümler arasında
   çift boşluk oluşmaz. Böylece sayfalarda "padding-top:0" yamasına
   gerek kalmaz. */
.bolum{
  position:relative;z-index:2;
  padding:var(--bo-8) var(--kenar);
}
.bolum + .bolum{padding-top:0}          /* ardışık bölüm: üstteki alt boşluğu yeterli */
.ic-hero + .bolum{padding-top:var(--bo-7)}  /* hero sonrası biraz daha sıkı */
.bolum:last-of-type{padding-bottom:var(--bo-9)} /* son bölüm altbilgiden ferah dursun */

.bolum-basi{margin-bottom:var(--bo-6);max-width:720px}
.bolum-basi p{margin-top:var(--bo-3);color:var(--metin-sonuk);font-size:16px;line-height:1.6}

/* ---------- Cam kart ---------- */
.izgara{display:grid;gap:var(--bo-5)}
.izgara.k2{grid-template-columns:repeat(2,1fr)}
.izgara.k3{grid-template-columns:repeat(3,1fr)}
.izgara.k4{grid-template-columns:repeat(4,1fr)}

.cam-kart{
  position:relative;
  background:rgba(6,24,20,.55);
  border:1px solid var(--cam-cizgi);border-radius:18px;
  padding:var(--bo-5);backdrop-filter:blur(10px);
  transition:transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}
.cam-kart:hover{
  transform:translateY(-3px);
  border-color:rgba(62,230,160,.4);
  box-shadow:0 16px 40px rgba(0,0,0,.4), 0 0 24px rgba(62,230,160,.10);
}
.cam-kart .ikon{
  width:46px;height:46px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--bo-4);
  background:rgba(62,230,160,.08);border:1px solid var(--cam-cizgi);
}
.cam-kart .ikon svg{width:24px;height:24px;stroke:var(--nane);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cam-kart p{margin-top:var(--bo-3);color:var(--metin-sonuk);font-size:14.5px;line-height:1.6}

/* ---------- Alt bilgi ---------- */
.site-alt{
  position:relative;z-index:1;
  border-top:1px solid rgba(62,230,160,.10);
  margin-top:auto;
  padding:var(--bo-7) var(--kenar) 0;
  width:100%;max-width:calc(var(--azami) + var(--kenar)*2);
  margin-inline:auto;
}
.alt-izgara{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--bo-6);
  padding-bottom:var(--bo-6);
}
.alt-izgara h4{
  font-size:11.5px;letter-spacing:1.6px;color:var(--metin-silik);
  font-weight:600;margin-bottom:var(--bo-4);text-transform:uppercase;
}
.alt-izgara ul{list-style:none;display:flex;flex-direction:column;gap:var(--bo-3)}
.alt-izgara a{color:var(--metin-sonuk);text-decoration:none;font-size:14px;transition:color var(--gecis)}
.alt-izgara a:hover{color:var(--nane)}
.alt-marka .brand{margin-bottom:14px}
.alt-marka p{color:var(--metin-sonuk);font-size:14px;line-height:1.6;max-width:280px}
.alt-iletisim .satir{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;color:var(--metin-sonuk);font-size:14px;line-height:1.5}
.alt-iletisim .satir svg{width:16px;height:16px;stroke:var(--nane);fill:none;stroke-width:1.7;flex:none;margin-top:2px}
.alt-iletisim a{text-decoration:none}

.alt-cubuk{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 0 24px;border-top:1px solid rgba(62,230,160,.08);
}
.telif{color:var(--metin-silik);font-size:13px}
/* Yönetim paneline gizli giriş: telif işareti tıklanabilir.
   Ziyaretçiye görünmez — normal metinden ayırt edilemez.
   Güvenlik bu gizlilikte değil, Firestore kurallarındadır. */
.telif-kapi{
  color:inherit;text-decoration:none;cursor:default;
  padding:2px 3px;border-radius:4px;
  transition:color var(--gecis), background var(--gecis);
}
.telif-kapi:hover{color:var(--nane);background:rgba(62,230,160,.08)}
.telif-kapi:focus-visible{outline:2px solid var(--nane);outline-offset:2px}
.alt-yasal{color:var(--metin-silik);text-decoration:none;transition:color var(--gecis)}
.alt-yasal:hover{color:var(--nane);text-decoration:underline}
.socials{display:flex;gap:16px}
.socials a{color:var(--metin-sonuk);display:flex;transition:color var(--gecis)}
.socials a:hover{color:var(--nane)}
.socials svg{width:18px;height:18px}

/* ---------- Duyarlılık ---------- */
@media (max-width:1250px){
  :root{--kenar:40px}
  .nav-pill a{font-size:13.5px;padding:8px 11px}
}
@media (max-width:1020px){
  .izgara.k4{grid-template-columns:repeat(2,1fr)}
  .izgara.k3{grid-template-columns:repeat(2,1fr)}
  .alt-izgara{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:900px){
  .menu-btn{display:flex}
  .nav-pill{
    position:fixed;top:0;right:0;bottom:0;left:auto;width:min(320px,86vw);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;
    padding:88px 18px 24px;border-radius:0;border:none;
    background:rgba(4,18,14,.97);backdrop-filter:blur(16px);
    box-shadow:-20px 0 60px rgba(0,0,0,.5);
    transform:translateX(100%);transition:transform .28s ease;
    z-index:30;overflow-y:auto;
  }
  .nav-pill.acik{transform:none}
  .nav-pill a{
    font-size:16px;padding:13px 16px;border-radius:12px;
    min-height:var(--dokunma);display:flex;align-items:center;
  }
  .nav-pill .btn{margin:12px 0 0;justify-content:center;padding:14px;min-height:var(--dokunma)}
  .acilir-menu{
    position:static;transform:none;opacity:1;visibility:visible;
    min-width:0;background:transparent;border:none;box-shadow:none;
    padding:2px 0 6px 14px;border-left:1px solid var(--cam-cizgi);margin-left:12px;
  }
  .acilir-menu a{min-height:var(--dokunma);font-size:15px}
  .acilir > a::after{display:none}
  .menu-perde{
    position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:25;
    opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s;
  }
  .menu-perde.acik{opacity:1;visibility:visible}
}
@media (max-width:640px){
  :root{
    --kenar:16px;--radius:20px;
    /* mobilde ölçek orantılı daralır — tek yerden yönetilir */
    --bo-5:20px; --bo-6:24px; --bo-7:32px; --bo-8:44px; --bo-9:56px;
  }
  .page{padding:14px 12px 0}
  .topbar{padding:16px 18px 0}
  .brand .name{font-size:20px;letter-spacing:2px}
  .brand .tag{display:none}
  .izgara.k2,.izgara.k3,.izgara.k4{grid-template-columns:1fr}
  .alt-izgara{grid-template-columns:1fr;gap:26px}
  .alt-cubuk{flex-direction:column;text-align:center;gap:14px}
  .wm{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ---------- Görünüme girince belirme ---------- */
[data-belir]{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s ease, transform .7s ease;
}
[data-belir].belirdi{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-belir]{opacity:1!important;transform:none!important}
}

/* ---------- Mobil dokunma hedefleri (44px standardı) ---------- */
@media (max-width:900px){
  /* altbilgi link listeleri */
  .alt-izgara ul{gap:2px}
  .alt-izgara ul a{
    min-height:var(--dokunma);
    display:flex;align-items:center;
  }
  /* altbilgi iletişim satırları — bağlantının kendisi dokunulabilir olmalı */
  .alt-iletisim .satir{align-items:center;margin-bottom:2px}
  .alt-iletisim .satir svg{margin-top:0}
  .alt-iletisim .satir a,
  .alt-iletisim .satir span{
    min-height:var(--dokunma);display:flex;align-items:center;flex:1;
  }
  /* sosyal ikonlar */
  .socials{gap:6px}
  .socials a{
    width:var(--dokunma);height:var(--dokunma);
    align-items:center;justify-content:center;border-radius:10px;
  }
  /* marka logosu */
  .brand{min-height:var(--dokunma);align-items:center}
  /* form alanları: seçim kutuları ve girdiler */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], select, textarea{
    min-height:var(--dokunma);
  }
}

/* ---------- Sayfa kimliği: hero işaret şeridi ----------
   Her sayfanın hero'suna kendine özgü bir bilgi şeridi.
   Sayfa değiştiğinde ziyaretçi bunu hisseder. */
.hero-isaret{
  display:flex;align-items:center;gap:0;flex-wrap:wrap;
  margin-top:var(--bo-6);
  border:1px solid var(--cam-cizgi);border-radius:14px;
  background:rgba(6,24,20,.45);backdrop-filter:blur(8px);
  overflow:hidden;width:fit-content;max-width:100%;
}
.hero-isaret .oge{
  display:flex;align-items:center;gap:11px;
  padding:13px 20px;
  border-right:1px solid rgba(62,230,160,.12);
}
.hero-isaret .oge:last-child{border-right:none}
.hero-isaret .oge svg{
  width:17px;height:17px;flex:none;
  stroke:var(--nane);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.hero-isaret .dg{
  font-size:16px;font-weight:700;color:var(--metin);letter-spacing:-.2px;line-height:1;
}
.hero-isaret .dg.nane{color:var(--nane)}
.hero-isaret .dg.sari{color:var(--sari)}
.hero-isaret .et{
  font-size:11px;letter-spacing:.6px;color:var(--metin-silik);
  font-weight:600;line-height:1.3;margin-top:3px;
}
.hero-isaret .metin{display:flex;flex-direction:column}

@media (max-width:640px){
  .hero-isaret{width:100%;flex-direction:column;align-items:stretch}
  .hero-isaret .oge{
    border-right:none;border-bottom:1px solid rgba(62,230,160,.12);
    padding:12px 16px;
  }
  .hero-isaret .oge:last-child{border-bottom:none}
}

/* ============================================================
   UYGULAMALAR — ortak hesaplayıcı bileşenleri
   Beş aracın tamamı bu stilleri paylaşır.
   ============================================================ */

/* --- uyarı kutusu --- */
.uyari-serit{
  display:flex;gap:12px;align-items:flex-start;
  padding:16px 18px;border-radius:14px;
  background:rgba(255,212,121,.07);border:1px solid rgba(255,212,121,.28);
  font-size:13.5px;line-height:1.6;color:var(--metin-sonuk);
}
.uyari-serit svg{width:17px;height:17px;stroke:var(--sari);fill:none;stroke-width:2;flex:none;margin-top:2px}
.uyari-serit strong{color:var(--metin)}

/* --- hesaplayıcı ızgarası --- */
.hesap-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--bo-5)}

.girdi-kart{
  background:rgba(6,24,20,.5);border:1px solid var(--cam-cizgi);
  border-radius:18px;padding:var(--bo-5);backdrop-filter:blur(8px);
  transition:border-color var(--gecis);
}
.girdi-kart:hover{border-color:rgba(62,230,160,.3)}
.girdi-kart .kart-ust{display:flex;align-items:center;gap:12px;margin-bottom:var(--bo-5)}
.girdi-kart .kart-ikon{
  width:42px;height:42px;border-radius:12px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(62,230,160,.08);border:1px solid var(--cam-cizgi);
}
.girdi-kart .kart-ikon svg{
  width:21px;height:21px;stroke:var(--nane);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.girdi-kart h3{font-size:16.5px;letter-spacing:-.2px}

/* --- alan --- */
.h-grup{margin-bottom:var(--bo-4)}
.h-grup:last-child{margin-bottom:0}
.h-grup label{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:12.5px;font-weight:600;color:var(--metin-sonuk);margin-bottom:7px;
}
.h-grup label .birim{font-size:11px;color:var(--metin-silik);font-weight:500;white-space:nowrap}
.h-grup input[type="number"],
.h-grup input[type="text"],
.h-grup select{
  width:100%;font-family:inherit;font-size:14.5px;color:var(--metin);
  background:rgba(4,16,13,.7);border:1px solid rgba(62,230,160,.16);
  border-radius:11px;padding:11px 14px;min-height:var(--dokunma);
  transition:border-color var(--gecis), box-shadow var(--gecis);
}
.h-grup select{
  appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fc6b8' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
}
.h-grup input:focus,.h-grup select:focus{
  outline:none;border-color:rgba(62,230,160,.55);
  box-shadow:0 0 0 3px rgba(62,230,160,.10);
}
/* sayı okları gizli — temiz görünüm */
.h-grup input[type=number]::-webkit-outer-spin-button,
.h-grup input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.h-grup input[type=number]{-moz-appearance:textfield}

/* --- eylem çubuğu --- */
.eylem-cubuk{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--bo-6)}

/* --- sonuç bölümü --- */
.sonuc-bolum{display:none}
.sonuc-bolum.acik{display:block;animation:belir .5s ease}
@keyframes belir{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.sonuc-kart{
  background:linear-gradient(140deg, rgba(62,230,160,.10), rgba(47,216,178,.03));
  border:1px solid rgba(62,230,160,.28);border-radius:20px;
  padding:var(--bo-6);
}
.buyuk-sayi{
  font-size:clamp(38px,5vw,54px);font-weight:800;letter-spacing:-2px;
  color:var(--nane);line-height:1;
  text-shadow:0 0 34px rgba(62,230,160,.35);
}
.buyuk-sayi .birim{font-size:20px;font-weight:600;letter-spacing:0;margin-left:6px}
.sonuc-et{
  font-size:11.5px;letter-spacing:1.5px;color:var(--metin-silik);
  font-weight:600;text-transform:uppercase;margin-bottom:10px;
}

/* --- kırılım çubuğu --- */
.kirilim-cubuk{
  display:flex;height:12px;border-radius:999px;overflow:hidden;
  background:rgba(4,16,13,.6);margin:var(--bo-5) 0 var(--bo-4);
}
.kirilim-cubuk span{
  height:100%;transition:width .8s cubic-bezier(.4,0,.2,1);
  min-width:0;
}
.kirilim-lejant{display:flex;flex-wrap:wrap;gap:var(--bo-4)}
.kirilim-lejant .oge{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--metin-sonuk)}
.kirilim-lejant .kutu{width:11px;height:11px;border-radius:3px;flex:none}

/* --- karşılaştırma satırları --- */
.karsilastir{display:grid;gap:var(--bo-3);margin-top:var(--bo-5)}
.karsilastir .satir{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:12px 16px;border-radius:12px;
  background:rgba(4,16,13,.45);border:1px solid rgba(62,230,160,.10);
  font-size:14px;
}
.karsilastir .satir .et{color:var(--metin-sonuk)}
.karsilastir .satir .dg{font-weight:700;color:var(--metin)}
.karsilastir .satir .dg.iyi{color:var(--nane)}
.karsilastir .satir .dg.orta{color:var(--sari)}
.karsilastir .satir .dg.kotu{color:var(--kirmizi)}

/* --- öneri listesi --- */
.oneri-liste{display:grid;gap:var(--bo-3)}
.oneri{
  display:flex;gap:13px;align-items:flex-start;
  padding:15px 17px;border-radius:13px;
  background:rgba(6,24,20,.5);border:1px solid var(--cam-cizgi);
}
.oneri .ik{
  width:30px;height:30px;border-radius:9px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(62,230,160,.10);border:1px solid rgba(62,230,160,.22);
}
.oneri .ik svg{width:15px;height:15px;stroke:var(--nane);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.oneri .gv strong{display:block;font-size:14.5px;color:var(--metin);margin-bottom:4px}
.oneri .gv p{font-size:13.5px;color:var(--metin-sonuk);line-height:1.6}

@media (max-width:640px){
  .hesap-izgara{grid-template-columns:1fr}
  .eylem-cubuk .btn{width:100%}
  .sonuc-kart{padding:var(--bo-5)}
}

/* ---------- WhatsApp düğmesi ---------- */
.wa-dugme{
  position:fixed;right:20px;bottom:20px;z-index:9000;
  display:flex;align-items:center;gap:9px;
  min-height:var(--dokunma);padding:12px 18px;border-radius:999px;
  background:#25d366;color:#062b17;text-decoration:none;
  font-size:14px;font-weight:700;font-family:inherit;
  box-shadow:0 8px 26px rgba(37,211,102,.4), 0 2px 8px rgba(0,0,0,.3);
  transition:transform var(--gecis), box-shadow var(--gecis);
}
.wa-dugme:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 34px rgba(37,211,102,.5), 0 4px 12px rgba(0,0,0,.35);
}
.wa-dugme:focus-visible{outline:3px solid #25d366;outline-offset:3px}
.wa-dugme svg{width:22px;height:22px;fill:currentColor;flex:none}

/* Mobilde metin gizli, yuvarlak simge — ekranı işgal etmesin */
@media (max-width:640px){
  .wa-dugme{padding:14px;border-radius:50%}
  .wa-dugme .wa-metin{display:none}
}

/* Hareket hassasiyeti: sıçrama animasyonu yok */
@media (prefers-reduced-motion: reduce){
  .wa-dugme{transition:none}
  .wa-dugme:hover{transform:none}
}

/* ---------- Sohbet düğmesi ---------- */
.sohbet-dugme{
  position:fixed;right:20px;bottom:84px;z-index:9000;
  display:flex;align-items:center;gap:9px;
  min-height:var(--dokunma);padding:12px 18px;border-radius:999px;
  background:rgba(6,24,20,.92);color:var(--nane);cursor:pointer;
  border:1px solid rgba(62,230,160,.4);
  font-size:14px;font-weight:700;font-family:inherit;
  box-shadow:0 8px 26px rgba(0,0,0,.35), 0 0 18px rgba(62,230,160,.12);
  transition:transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
  backdrop-filter:blur(8px);
}
.sohbet-dugme:hover{
  transform:translateY(-3px);border-color:rgba(62,230,160,.7);
  box-shadow:0 12px 34px rgba(0,0,0,.4), 0 0 26px rgba(62,230,160,.22);
}
.sohbet-dugme:focus-visible{outline:3px solid var(--nane);outline-offset:3px}
.sohbet-dugme svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;flex:none}
.sohbet-dugme.bekliyor{opacity:.6;pointer-events:none}

@media (max-width:640px){
  .sohbet-dugme{padding:14px;border-radius:50%;bottom:82px}
  .sohbet-dugme .sohbet-metin{display:none}
}
@media (prefers-reduced-motion: reduce){
  .sohbet-dugme{transition:none}
  .sohbet-dugme:hover{transform:none}
}

/* ---------- Sohbet paneli ---------- */
.sohbet-panel{
  position:fixed;right:20px;bottom:84px;z-index:9600;
  width:440px;max-width:calc(100vw - 24px);
  height:700px;max-height:calc(100vh - 104px);
  display:none;flex-direction:column;overflow:hidden;
  background:rgba(4,16,13,.97);border:1px solid rgba(62,230,160,.28);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 40px rgba(62,230,160,.1);
  backdrop-filter:blur(14px);
}
.sohbet-panel.acik{display:flex}
@media (max-width:640px){
  .sohbet-panel{right:12px;left:12px;width:auto;bottom:76px}
}

.sohbet-ust{
  display:flex;align-items:center;gap:8px;
  padding:14px 16px;border-bottom:1px solid var(--cam-cizgi);
  background:rgba(6,24,20,.6);
}
.sb-kim{display:flex;align-items:center;gap:10px}
.sb-kim strong{font-size:14.5px;display:block;color:var(--metin)}
.sb-kim small{font-size:11.5px;color:var(--metin-silik)}
.sb-nokta{
  width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--nane);box-shadow:0 0 8px rgba(62,230,160,.8);
}
.sb-temizle{
  width:36px;height:36px;border-radius:9px;cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--cam-cizgi);
  margin-left:auto;
}
.sb-temizle:hover{border-color:rgba(255,107,129,.4)}
.sb-temizle svg{width:14px;height:14px;stroke:var(--metin-silik);stroke-width:2;fill:none}
.sb-temizle:hover svg{stroke:var(--kirmizi)}
.sb-kapat{
  width:36px;height:36px;border-radius:9px;cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--cam-cizgi);
}
.sb-kapat:hover{border-color:rgba(62,230,160,.4)}
.sb-kapat svg{width:15px;height:15px;stroke:var(--metin-sonuk);stroke-width:2.2;fill:none}

.sohbet-akis{
  flex:1;overflow-y:auto;padding:16px 14px;
  display:flex;flex-direction:column;gap:10px;
}
.sb-balon{
  max-width:90%;padding:11px 14px;border-radius:14px;
  font-size:13.5px;line-height:1.6;color:var(--metin);
  word-break:break-word;
}
.sb-bot{
  align-self:flex-start;background:rgba(6,24,20,.7);
  border:1px solid var(--cam-cizgi);border-bottom-left-radius:5px;
}
.sb-ben{
  align-self:flex-end;background:rgba(62,230,160,.12);
  border:1px solid rgba(62,230,160,.3);border-bottom-right-radius:5px;
}
.sb-alt{margin-top:8px;padding-top:8px;border-top:1px solid var(--cam-cizgi)}
.sb-link{color:var(--nane);text-decoration:none;font-weight:700;font-size:12.5px}
.sb-link:hover{text-decoration:underline}
.sb-eylem{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sb-eylem a{
  padding:8px 13px;border-radius:9px;text-decoration:none;
  font-size:12.5px;font-weight:700;color:var(--nane);
  background:rgba(62,230,160,.08);border:1px solid rgba(62,230,160,.3);
}
.sb-eylem a:hover{background:rgba(62,230,160,.15)}

.sb-bekle{display:flex;gap:5px;padding:14px 16px}
.sb-bekle span{
  width:7px;height:7px;border-radius:50%;background:var(--nane);opacity:.4;
  animation:sbNabiz 1s infinite;
}
.sb-bekle span:nth-child(2){animation-delay:.2s}
.sb-bekle span:nth-child(3){animation-delay:.4s}
@keyframes sbNabiz{0%,100%{opacity:.3}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.sb-bekle span{animation:none;opacity:.7}}

.sohbet-cips{
  display:flex;gap:7px;flex-wrap:wrap;padding:0 14px 8px;
}
.sb-cip{
  padding:7px 12px;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:600;color:var(--metin-sonuk);
  background:rgba(6,24,20,.6);border:1px solid var(--cam-cizgi);
  transition:border-color var(--gecis), color var(--gecis);
  text-align:left;
}
.sb-cip:hover{border-color:rgba(62,230,160,.45);color:var(--nane)}

.sohbet-giris{
  display:flex;gap:9px;padding:11px 14px;
  border-top:1px solid var(--cam-cizgi);background:rgba(6,24,20,.6);
}
.sohbet-giris input{
  flex:1;font-family:inherit;font-size:13.5px;color:var(--metin);
  background:rgba(4,16,13,.8);border:1px solid rgba(62,230,160,.16);
  border-radius:11px;padding:11px 14px;min-height:var(--dokunma);
}
.sohbet-giris input:focus{outline:none;border-color:rgba(62,230,160,.5)}
.sohbet-giris button{
  width:46px;border-radius:11px;cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(62,230,160,.14);border:1px solid rgba(62,230,160,.4);
}
.sohbet-giris button:hover{background:rgba(62,230,160,.24)}
.sohbet-giris button svg{width:19px;height:19px;stroke:var(--nane);fill:none;stroke-width:1.9}

.sohbet-not{
  padding:7px 14px 11px;font-size:10.5px;color:var(--metin-silik);
  text-align:center;
}

/* sohbet: kategori listesi */
.sb-liste{margin:8px 0 0 16px;padding:0}
.sb-liste li{font-size:12.5px;line-height:1.65;color:var(--metin-sonuk);margin-bottom:5px}
.sb-liste strong{color:var(--nane);font-weight:700}