/* Peak · ücretsiz araçlar (araclar.html + arac-*.html). Ortak katmanın (temel.css) üstüne gelir; yalnız bu sayfalar yükler.
   Tasarım dili v1: gece zemin, tek kobalt ışık, sayı hep grafikle, mavi ailesi, cam şeritler (13 Eki). */

.sayfa-arac [hidden]{display:none!important}
/* ---------- giriş: iç sayfa girişinden kısa, araç hemen görünsün ---------- */
.arac-giris{position:relative;overflow-x:clip;overflow-y:visible;padding:clamp(132px,12.5vw,196px) 0 clamp(34px,3.6vw,56px)}
.arac-giris .baslik{max-width:17ch}
.arac-giris .govde{margin-top:24px;max-width:640px}
.arac-giris .giris-alt{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:26px}
.gizlilik-not{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--metin);padding:10px 16px 10px 12px;border-radius:13px}
.gizlilik-not:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--buz);box-shadow:0 0 10px rgba(127,212,255,.7);flex:none}

/* ---------- araçlar arası cam sekme çubuğu ---------- */
.arac-menu{margin-bottom:8px}
.arac-menu a[aria-current=page]{background:rgba(127,212,255,.12);color:#fff}
.arac-menu .hepsi{color:var(--soluk)}

/* ---------- araç düzeni ---------- */
.arac-bolum{padding:clamp(28px,3vw,48px) 0 clamp(64px,7vw,110px)}
.arac-izgara{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:20px;align-items:start}
.arac-sonuc{position:sticky;top:164px;overflow:hidden}
.arac-sonuc>.isik{width:620px;right:-260px;top:-300px;opacity:.9}
.arac-sonuc>*:not(.isik){position:relative}
.arac-girdi{display:grid;gap:28px}

/* ---------- girdi grupları ---------- */
.grup{display:grid;gap:16px}
.grup+.grup{padding-top:26px;border-top:1px solid rgba(127,212,255,.1)}
.grup-bas{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.alanlar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
.alanlar .tam{grid-column:1/-1}
.alanlar.uclu{grid-template-columns:repeat(3,minmax(0,1fr))}
.alan .ad{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ipucu,.alan-not{font-size:13px;color:var(--soluk);line-height:1.4}
.girdi-birim .girdi{font-size:17px}
.girdi.hatali{border-color:var(--buz);box-shadow:0 0 0 4px rgba(127,212,255,.14)}
/* "örnek · değiştir" işareti: kullanıcı alana dokununca söner */
.rozet{display:inline-flex;align-items:center;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--soluk);
  padding:3px 8px;border-radius:999px;border:1px dashed rgba(127,212,255,.35);line-height:1.3;transition:opacity .3s}
.rozet.soner{opacity:0;pointer-events:none}
.kucuk-dug{font-size:14px;font-weight:500;color:var(--buz);background:none;border:0;cursor:pointer;padding:6px 2px}
.kucuk-dug:hover{color:#fff}
.dug-satir{display:flex;flex-wrap:wrap;gap:4px 18px}

/* kâr hesabı (Excel Kârlılık Analizi): her satır bir alan, birimi sabit; yanında hesaplanan TL karşılığı */
.ka-ust{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.ka-ust .dipnot{font-size:13px;color:var(--soluk)}
.ka-alanlar{display:grid;gap:6px}
.ka-s{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,170px) minmax(96px,auto);align-items:center;gap:6px 14px;padding:10px 10px 10px 14px;border-radius:14px;
  border:1px solid transparent;transition:border-color .3s,background .3s}
.ka-s:focus-within{border-color:rgba(127,212,255,.22);background:rgba(127,212,255,.04)}
.ka-ad{display:grid;gap:4px;min-width:0}
.ka-ad label{font-size:15px;font-weight:500;color:#fff}
.ka-ad small{font-size:12.5px;color:var(--soluk);line-height:1.4}
.ka-s .girdi{min-height:48px;padding:10px 54px 10px 14px;text-align:right;font-variant-numeric:tabular-nums}
.ka-s.bos .girdi{border-style:dashed;border-color:rgba(127,212,255,.32)}
.ka-tl{font-size:14px;color:var(--buz);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.ka-ikili{grid-template-columns:repeat(2,minmax(0,1fr))}
.kar-cubuk .cubuk-s.toplam{margin-top:6px;padding-top:10px;border-top:1px solid rgba(127,212,255,.08)}
.kar-cubuk .cubuk-s.toplam .ad{color:#fff}

/* iki ya da üç seçenekli seçici (TL/%, sen/müşteri, teklif türü) */
.secim{display:inline-flex;padding:4px;gap:2px;border-radius:12px;background:rgba(5,7,15,.55);border:1px solid rgba(127,212,255,.16)}
.secim label{position:relative;cursor:pointer}
.secim input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.secim span{display:block;padding:8px 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--soluk);white-space:nowrap;transition:color .2s,background .2s}
.secim input:checked+span{background:rgba(127,212,255,.14);color:#fff}
.secim input:focus-visible+span{outline:2px solid var(--buz);outline-offset:1px}
.secim.genis{display:flex}
.secim.genis label{flex:1;text-align:center}
.secim.genis span{padding:11px 12px}
.teklif-alan[hidden]{display:none}

/* ---------- sonuç paneli ---------- */
.sonuc-bas{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.sonuc-dev{display:flex;align-items:baseline;gap:10px;margin-top:14px;flex-wrap:wrap}
.sonuc-dev .sayi{font-size:clamp(58px,5.6vw,104px);color:#fff;min-width:0;max-width:100%;overflow-wrap:anywhere}
.sonuc-dev .birim{font-size:clamp(18px,1.5vw,24px);color:var(--buz);font-weight:500}
.sonuc-dev .yan{font-size:15px;color:var(--metin);margin-left:6px}
.sonuc-cumle{margin-top:14px;color:var(--metin);line-height:1.42;font-size:16px;max-width:52ch}
.sonuc-cumle b{color:#fff;font-weight:600}
.ikili{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.ikili>div{min-width:0;overflow-wrap:anywhere;padding:16px 18px;border-radius:16px;background:rgba(5,7,15,.42);border:1px solid rgba(127,212,255,.12)}
.ikili .etiket{font-size:11.5px}
.ikili .deger{display:block;margin-top:10px;font-size:clamp(28px,2.4vw,40px);font-weight:300;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#fff;line-height:1}
.ikili .deger small{font-size:15px;color:var(--buz);font-weight:500;letter-spacing:0;margin-left:6px}
.ikili p{margin-top:8px;font-size:13.5px;color:var(--soluk);line-height:1.4}
.grafik{margin-top:24px}
.lejant-a{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;font-size:13px;color:var(--soluk)}
.lejant-a i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:-1px}
.lejant-a .l-dusen{background:repeating-linear-gradient(135deg,rgba(127,212,255,.5) 0 2px,rgba(127,212,255,.08) 2px 5px)}
.lejant-a .l-simdi{background:var(--buz)}
.lejant-a .l-kalan{background:var(--kobalt)}
.lejant-a .l-bos{border:1px dashed rgba(127,212,255,.6)}
.lejant-a .l-hedef{background:var(--buz)}
.durum-not{margin-top:18px;padding:14px 16px;border-radius:14px;font-size:15px;line-height:1.42;color:#fff;
  background:rgba(127,212,255,.07);border:1px solid rgba(127,212,255,.3)}
.durum-not[hidden]{display:none}
.sonuc-alt{margin-top:26px;padding-top:22px;border-top:1px solid rgba(127,212,255,.1);display:grid;gap:14px}
.sonuc-alt .satir{gap:12px 24px}
.dipnot b{color:var(--metin);font-weight:500}

/* kâr: kalem çubukları (temel .cubuklar üstüne) */
.kar-cubuk .cubuk-s{grid-template-columns:minmax(110px,160px) 1fr minmax(78px,auto)}
.kar-cubuk .cubuk-yol{height:26px}
.kar-cubuk .cubuk{transition:width .55s var(--egri),background .3s}
.kar-cubuk .cubuk-s.simdi .cubuk{background:var(--buz)}
.kar-cubuk .cubuk-s.simdi .ad{color:#fff}
.kar-cubuk .cubuk-s.bos .ad{color:var(--soluk)}
.kar-cubuk .cubuk-s.bos .deger{color:var(--buz);font-size:13px;letter-spacing:.04em}
.kar-cubuk .cubuk.bos{width:100%;opacity:.55}
.kar-cubuk .cubuk-s.son{margin-top:8px;padding-top:12px;border-top:1px solid rgba(127,212,255,.12)}
.uc-durum.ince{height:30px;gap:2px;margin-top:22px}
.uc-durum>i{transition:flex-basis .55s var(--egri),background .3s;min-width:0}
.uc-durum .zarar-pay{background:repeating-linear-gradient(135deg,rgba(255,255,255,.5) 0 2px,rgba(255,255,255,.06) 2px 7px)}

/* başa baş: ROAS cetveli */
.cetvel{position:relative;margin-top:30px;padding-top:30px}
.cetvel .yol{position:relative;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--kobalt),var(--kobalt-acik));overflow:hidden}
.cetvel .zarar-b{position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);
  background:repeating-linear-gradient(135deg,rgba(127,212,255,.34) 0 2px,rgba(5,7,15,.92) 2px 7px);transition:width .55s var(--egri)}
.cetvel .ara-b{position:absolute;top:0;bottom:0;left:var(--a,0%);width:var(--w,0%);background:rgba(127,212,255,.25);transition:left .55s var(--egri),width .55s var(--egri)}
.cetvel .im{position:absolute;top:0;left:var(--x,0%);transform:translateX(-50%);display:grid;justify-items:center;gap:6px;transition:left .55s var(--egri)}
.cetvel .im b{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--buz);white-space:nowrap}
.cetvel .im:after{content:"";width:2px;height:24px;border-radius:2px;background:#fff;box-shadow:0 0 10px rgba(127,212,255,.8)}
.cetvel .im.hedef:after{background:var(--buz)}
.cetvel .im.hedef{top:22px}
.cetvel .im.hedef:after{order:-1;height:24px}
.cetvel .uclar{display:flex;justify-content:space-between;gap:12px;margin-top:34px;font-size:12.5px;color:var(--soluk)}
.cetvel[hidden]{display:none}

/* sütunlar (teklif, bütçe) */
.sutun-graf{display:flex;align-items:flex-end;gap:14px;height:210px;padding-top:30px}
.sutun-graf .s{flex:1;display:grid;grid-template-rows:minmax(0,1fr) auto;height:100%;gap:10px;min-width:0}
.sutun-graf .s i{align-self:end}
.sutun-graf .s i{display:block;width:100%;border-radius:9px 9px 4px 4px;height:var(--h,0%);min-height:4px;position:relative;
  background:linear-gradient(180deg,var(--kobalt-acik),rgba(30,80,255,.14));transition:height .6s var(--egri)}
.sutun-graf .s.vurgu i{background:linear-gradient(180deg,var(--buz),rgba(127,212,255,.12))}
.sutun-graf .s.tarali i{background:repeating-linear-gradient(135deg,rgba(127,212,255,.3) 0 2px,rgba(127,212,255,.03) 2px 8px);border:1px dashed rgba(127,212,255,.35)}
.sutun-graf .s i em{position:absolute;left:0;right:0;top:-26px;text-align:center;font-style:normal;font-size:14px;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.sutun-graf .s small{text-align:center;font-size:12.5px;color:var(--soluk);letter-spacing:.04em;line-height:1.3}

/* teklif: sipariş başı kâr çubukları */
.kar-iki{display:grid;gap:10px;margin-top:22px}

/* bütçe: senaryo kartları */
.senaryolar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.senaryo{padding:16px;border-radius:16px;background:rgba(5,7,15,.42);border:1px solid rgba(127,212,255,.12);display:grid;gap:10px;align-content:start}
.senaryo.orta{border-color:rgba(127,212,255,.3)}
.senaryo .etiket{font-size:11px}
.senaryo .butce{font-size:clamp(22px,1.7vw,30px);font-weight:300;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums;line-height:1.05}
.senaryo dl{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;font-size:13.5px}
.senaryo dt{color:var(--soluk)}
.senaryo dd{color:var(--metin);text-align:right;font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
.senaryo .uyari{font-size:13px;color:var(--buz);line-height:1.35}
.aralik-dev{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:14px}
.aralik-dev .sayi{font-size:clamp(40px,3.8vw,70px);color:#fff;min-width:0;max-width:100%;overflow-wrap:anywhere}
.aralik-dev .tire{font-size:clamp(28px,2.4vw,44px);color:var(--soluk);font-weight:200}
.aralik-dev .birim{font-size:18px;color:var(--buz);font-weight:500}

/* tekrar: 100 müşteri nokta ızgarası */
.nokta-100{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:7px;margin-top:22px;max-width:520px}
.nokta-100 i{aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(127,212,255,.28);transition:background .4s,border-color .4s,box-shadow .4s}
.nokta-100 i.iki{background:var(--kobalt-acik);border-color:var(--kobalt-acik)}
.nokta-100 i.uc{background:var(--buz);border-color:var(--buz);box-shadow:0 0 10px rgba(127,212,255,.6)}
.lejant-a .l-iki{background:var(--kobalt-acik);border-radius:50%}
.lejant-a .l-uc{background:var(--buz);border-radius:50%;box-shadow:0 0 8px rgba(127,212,255,.7)}
.lejant-a .l-bir{border:1.5px solid rgba(127,212,255,.4);border-radius:50%}
.yigin{display:grid;gap:10px;margin-top:22px}
.yigin .cubuk-s{grid-template-columns:minmax(96px,140px) 1fr minmax(90px,auto)}
.yigin .cubuk-yol{display:flex;gap:2px;background:rgba(127,212,255,.05)}
.yigin .cubuk-yol>i{display:block;height:100%;transition:width .55s var(--egri)}
.yigin .p-ilk{background:linear-gradient(90deg,var(--kobalt),var(--kobalt-acik));border-radius:7px 0 0 7px}
.yigin .p-iki{background:var(--kobalt-acik);opacity:.75}
.yigin .p-uc{background:var(--buz);border-radius:0 7px 7px 0}
.yigin .p-tek{background:linear-gradient(90deg,var(--kobalt),var(--kobalt-acik));border-radius:7px}

/* ---------- nasıl hesaplanır ---------- */
.nasil .kap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px 64px;align-items:start}
.formul{display:grid;gap:0}
.formul>div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:6px 20px;padding:15px 0;border-top:1px solid rgba(127,212,255,.1)}
.formul>div:first-child{border-top:0;padding-top:0}
.formul dt{color:#fff;font-weight:500;font-size:15.5px;line-height:1.35}
.formul dd{color:var(--metin);font-size:15.5px;line-height:1.42}
.formul dd code{font-family:inherit;color:var(--buz);font-variant-numeric:tabular-nums}
.varsayim{margin-top:22px}
.varsayim .liste-nokta li{font-size:15px}

/* ---------- telefonda yapışkan cam sonuç çubuğu ---------- */
.sonuc-serit{position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:70;border-radius:16px;padding:10px 10px 10px 16px;
  display:none;align-items:center;justify-content:space-between;gap:12px;transition:transform .45s var(--egri),opacity .35s}
.sonuc-serit .ser-sol{display:grid;gap:2px;min-width:0}
.sonuc-serit .etiket{font-size:10.5px}
.sonuc-serit b{font-size:20px;font-weight:500;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sonuc-serit b small{font-size:13px;color:var(--buz);font-weight:500;margin-left:6px;letter-spacing:0}
.sonuc-serit a{flex:none;font-size:14px;font-weight:600;color:#fff;padding:10px 14px;border-radius:11px;background:rgba(127,212,255,.12);border:1px solid rgba(127,212,255,.2)}
.sonuc-serit.gizle{transform:translateY(140%);opacity:0;pointer-events:none}

/* ---------- araçlar sayfası ---------- */
.arac-vitrin{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.arac-kart{grid-column:span 2;display:flex;flex-direction:column;gap:16px;min-height:330px;overflow:hidden}
.arac-kart.genis{grid-column:span 3}
.arac-kart .mini{height:96px;display:flex;align-items:flex-end;margin-bottom:6px}
.arac-kart .simge{width:96px;height:96px;margin:4px 0 8px} /* Revize 2 şef: ana sayfadaki araç simgeleri bu sayfada da (Arda, 13 Eki gece) */
.arac-kart .ust-k{display:flex;justify-content:space-between;align-items:center}
.arac-kart p{color:var(--metin);font-size:15.5px;line-height:1.4}
.arac-kart .git{margin-top:auto;color:var(--buz);font-size:15px;font-weight:500;display:inline-flex;gap:8px}
.arac-kart .git span{transition:transform .25s var(--egri)}
.arac-kart:hover .git span{transform:translateX(4px)}
.mini-cubuk{display:grid;gap:5px;width:100%}
.mini-cubuk i{display:block;height:9px;border-radius:4px;background:linear-gradient(90deg,var(--kobalt),var(--kobalt-acik));width:var(--w)}
.mini-cubuk i.t{background:repeating-linear-gradient(135deg,rgba(127,212,255,.4) 0 2px,rgba(127,212,255,.05) 2px 6px)}
.mini-cubuk i.s{background:linear-gradient(90deg,var(--buz),#fff)}
.mini-cetvel{position:relative;width:100%;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--kobalt),var(--kobalt-acik));margin-bottom:18px}
.mini-cetvel:before{content:"";position:absolute;left:0;top:0;bottom:0;width:36%;border-radius:5px 0 0 5px;background:repeating-linear-gradient(135deg,rgba(127,212,255,.34) 0 2px,rgba(5,7,15,.92) 2px 6px)}
.mini-cetvel:after{content:"";position:absolute;left:36%;top:-10px;width:2px;height:30px;background:#fff;box-shadow:0 0 10px rgba(127,212,255,.8)}
.mini-sutun{display:flex;align-items:flex-end;gap:8px;height:100%;width:100%}
.mini-sutun i{flex:1;border-radius:6px 6px 3px 3px;height:var(--h);background:linear-gradient(180deg,var(--kobalt-acik),rgba(30,80,255,.12))}
.mini-sutun i.v{background:linear-gradient(180deg,var(--buz),rgba(127,212,255,.1))}
.mini-nokta{display:grid;grid-template-columns:repeat(10,10px);gap:6px}
.mini-nokta i{width:10px;height:10px;border-radius:50%;border:1px solid rgba(127,212,255,.35)}
.mini-nokta i.d{background:var(--kobalt-acik);border-color:var(--kobalt-acik)}
.mini-nokta i.p{background:var(--buz);border-color:var(--buz);box-shadow:0 0 8px rgba(127,212,255,.6)}
.tasima-izgara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tasima-izgara .kutu p{color:var(--metin);font-size:15.5px;line-height:1.42;margin-top:10px}

/* ---------- boylar ---------- */
@media (max-width:1100px){
  .arac-izgara{grid-template-columns:minmax(0,1fr)}
  .arac-sonuc{position:relative;top:auto}
  .arac-vitrin{grid-template-columns:repeat(2,minmax(0,1fr))}
  .arac-kart,.arac-kart.genis{grid-column:span 1}
  .arac-kart.genis:first-child{grid-column:1/-1}
  .nasil .kap{grid-template-columns:1fr}
}
@media (max-width:960px){
  .sonuc-serit{display:flex}
  .tasima-izgara{grid-template-columns:1fr}
}
@media (max-width:640px){
  .arac-giris{padding-top:118px}
  .alanlar,.alanlar.uclu{grid-template-columns:1fr}
  .ka-s{grid-template-columns:minmax(0,1fr) auto;padding:10px 6px;gap:8px 12px}
  .ka-ad{grid-column:1/-1}
  .ka-s .girdi-birim{grid-column:1;grid-row:2}
  .ka-tl{grid-column:2;grid-row:2;min-width:84px}
  .ikili{grid-template-columns:1fr}
  .senaryolar{grid-template-columns:1fr}
  .senaryo dl{gap:5px 10px}
  .kar-cubuk .cubuk-s,.yigin .cubuk-s{grid-template-columns:1fr auto}
  .sutun-graf{height:180px;gap:10px}
  .nokta-100{gap:5px}
  .formul>div{grid-template-columns:1fr}
  .arac-vitrin{grid-template-columns:1fr}
  .arac-kart.genis:first-child{grid-column:auto}
  .arac-kart{min-height:0}
  .cetvel .im b{font-size:10.5px;letter-spacing:.04em}
  .sonuc-alt .satir .dug{width:100%}
  main{padding-bottom:84px}
}
@media (prefers-reduced-motion:reduce){
  .sonuc-serit{transition:none}
}
@media (max-width:420px){.secim.genis span{padding:10px 6px;font-size:13px;white-space:normal;line-height:1.2}}