/* Mobil tasarım dili (2026-10-13, Aşama 0; plan: kullanıcı onayı, iPhone 13 = 390x844).
   style.css'ten SONRA yüklenir. Kurallar yalnızca telefon/tablet genişliğinde (<= 820px) ya da dokunmatik ekranda
   (hover: none) çalışır; masaüstü görünümü değişmez. İleride mobil uygulamada (PWA / Capacitor) aynı parçalar kullanılır. */

:root{
  --m-kenar:20px;            /* sayfa yan boşluğu */
  --m-dokun:52px;            /* ana düğme / alan yüksekliği (en az 44px dokunma alanı) */
  --m-r:16px;                /* düğme ve alan köşesi */
  --m-r-kart:22px;           /* kart köşesi */
  --m-golge:0 1px 0 rgba(255,236,190,.05) inset,0 14px 34px rgba(0,0,0,.35);
  --m-kart-zemin:linear-gradient(180deg,#2B2216 0%,var(--card) 100%);
  --m-hiz:.18s cubic-bezier(.2,.8,.2,1);
}

/* ── Dokunmatik ekran: fare efektleri yerine dokunma geri bildirimi ── */
html{-webkit-tap-highlight-color:transparent}
@media(hover:none){
  .btn:hover,.btn-gold:hover,.layer:hover,.wa-yuzen:hover{transform:none}
  .btn,.chip,.tab,.copy,.layer,.cardc,.menu-ac,.link-btn,.faq summary,.howto li,.wa-yuzen{transition:transform var(--m-hiz),background .2s,border-color .2s,opacity .2s}
  .btn:active,.chip:active,.tab:active,.copy:active,.menu-ac:active,.wa-yuzen:active{transform:scale(.96)}
  .btn-gold:active{background:var(--gold-hi)}
  .layer:active,.cardc:active,.faq summary:active{transform:scale(.985)}
  .link-btn:active{opacity:.6}
}

@media(max-width:820px){
  /* ── Temel ölçek ── */
  body{padding-inline:var(--m-kenar);font-size:16px;line-height:1.55;padding-bottom:env(safe-area-inset-bottom,0px)}
  .nav{margin-inline:calc(-1 * var(--m-kenar));padding:10px var(--m-kenar)}
  .mono{font-size:12px;letter-spacing:.12em}
  h2{font-size:clamp(1.75rem,7.6vw,2.2rem);line-height:1.08}
  section{padding-block:48px}
  .head{gap:10px;margin-bottom:24px}
  .head p{font-size:1rem}

  /* ── Düğmeler: büyük, tam genişlik, kolay basılır ── */
  .btn{min-height:44px;justify-content:center}
  .cta{display:grid;grid-template-columns:1fr;gap:10px;margin-top:26px}
  .cta .btn,body:not(.hesap-sayfa) .form-kart .btn{min-height:var(--m-dokun);border-radius:var(--m-r);font-size:16px;width:100%}
  .btn-gold{box-shadow:0 8px 22px rgba(210,166,0,.22)}

  /* ── Açılış (ana sayfa): mesaj ve düğmeler ilk ekranda ── */
  .hero{padding-block:28px 40px;gap:18px}
  .emblem{width:104px;max-width:104px;margin:0;order:-1}
  .emblem .mono{display:none}
  .k{width:92%}
  .hero h1{font-size:clamp(2.35rem,11vw,2.9rem);line-height:1;letter-spacing:-.04em}
  .hero .lead{margin-top:16px;font-size:1.04rem;line-height:1.55}

  /* ── Alt sayfa başlıkları ── */
  .page-hero{padding-block:28px 22px}
  .page-hero h1{font-size:clamp(2.1rem,9.6vw,2.6rem)}
  .page-hero .lead{margin-top:14px;font-size:1.02rem}
  .kicker{margin-bottom:14px}

  /* ── Kartlar ve form alanları ── */
  /* Hesabım (body.hesap-sayfa) Aşama 1'de ayrıca ele alınır; o zamana kadar bu kart kuralları orada çalışmaz */
  body:not(.hesap-sayfa) .form-kart{border-radius:var(--m-r-kart);background:var(--m-kart-zemin);box-shadow:var(--m-golge);padding:22px 18px;margin-bottom:48px}
  body:not(.hesap-sayfa) .form-kart form{gap:14px}
  .alan>span{font-size:12px}
  .alan input,.alan select,.alan textarea{min-height:var(--m-dokun);border-radius:var(--m-r);font-size:17px;padding:14px 16px}
  .alan textarea{min-height:110px}
  .kod-alan{font-size:28px!important}
  body:not(.hesap-sayfa) .form-alt{display:grid;grid-template-columns:1fr;gap:12px;justify-items:center}
  body:not(.hesap-sayfa) .form-alt .btn{width:100%;min-height:48px;border-radius:var(--m-r)}
  .form-kucuk{font-size:.85rem;line-height:1.5}
  .note,.howto li,.cardc,.callout{border-radius:var(--m-r-kart)}

  /* ── Altbilgi: sade, iki sütun bağlantı ── */
  footer{padding-block:28px calc(28px + env(safe-area-inset-bottom,0px));font-size:.88rem}
  footer .wrap{display:grid;gap:16px}
  .footer-links{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
  .footer-links a{padding-block:2px}
  .wa-yuzen{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}

/* ── Hesabım: alt sekme çubuğu + sihirbaz düğme çubuğu (kullanıcı iPhone ekranları, 2026-10-13) ──
   Sekme çubuğunun yüksekliği SABİT: --sekme-taban + iPhone alt payı (env). Düğme çubuğu aynı formülle onun üstünde durur.
   JS ile ölçmek kaydırırken (Safari araç çubuğu küçülürken) geride kalıyor, düğmeler sıkışıyordu; CSS'te ikisi aynı anda değişir. */
:root{--sekme-taban:68px}
@media(max-width:820px){
  .sekmeler{height:calc(var(--sekme-taban) + env(safe-area-inset-bottom,0px));align-items:stretch}
  .sekmeler button{position:relative;min-height:0}
  .sekmeler .sekme-sayi{position:absolute;top:2px;left:calc(50% + 8px);margin:0}
  body.hesap-sayfa{padding-bottom:calc(var(--sekme-taban) + env(safe-area-inset-bottom,0px) + 8px)}
  .sh-alt{bottom:calc(var(--sekme-taban) + env(safe-area-inset-bottom,0px));gap:10px;box-shadow:0 -10px 24px rgba(0,0,0,.35)}
  .sh-alt #taslak{white-space:nowrap;font-size:.9rem}
  .sh-alt .btn{min-width:0;min-height:48px;padding-inline:22px;border-radius:var(--m-r)}
  .sh-alt #ileri,.sh-alt #gonder{flex:0 1 auto;min-width:132px}
}

/* ══ Aşama 1: Hesabım uygulama görünümü (body.hesap-sayfa, yalnızca telefon) ══════════════════════════════
   Üstte kısa selam; durum kartı yalnızca Panel ve Başvurum'da; kartlar uygulama kartı; site altbilgisi yalnızca
   Gizlilik sekmesinde (yasal bağlantılar orada kalır); Panel'deki hızlı bağlantılar alt sekme çubuğuyla aynı olduğu için gizli. */
@media(max-width:820px){
  .hesap-sayfa .hesap .hesap-ust{padding:18px 0 14px;gap:12px}
  .hesap-sayfa .hesap-selam .kicker,.hesap-sayfa .hesap-kim{display:none}
  .hesap-sayfa .hesap-selam h1{font-size:clamp(1.6rem,7.4vw,2rem);letter-spacing:-.03em}
  .hesap-sayfa[data-sekme=firsatlar] .durum-kart,.hesap-sayfa[data-sekme=destek] .durum-kart,
  .hesap-sayfa[data-sekme=gizlilik] .durum-kart{display:none}
  .hesap-sayfa:not([data-sekme=gizlilik]) footer{display:none}
  .hesap-sayfa .panel-hizli{display:none}

  /* uygulama kartları */
  .hesap-sayfa .durum-kart,.hesap-sayfa .form-kart,.hesap-sayfa .sihirbaz,.hesap-sayfa .panel-sayi{
    border-radius:var(--m-r-kart);background:var(--m-kart-zemin);box-shadow:var(--m-golge)}
  .hesap-sayfa .durum-kart{padding:14px 16px}
  .hesap-sayfa .durum-kart p{font-size:.92rem;line-height:1.5}
  .hesap-sayfa .form-kart{padding:20px 18px;margin-bottom:14px}
  .hesap-sayfa .kart-baslik{font-size:1.15rem}

  /* Panel sayaçları: büyük rakam, dokununca basılır */
  .hesap-sayfa .panel-sayac{gap:10px}
  .hesap-sayfa .panel-sayi{padding:14px;min-height:88px;align-content:space-between}
  .hesap-sayfa .panel-sayi b{font-size:1.9rem}
  .hesap-sayfa .panel-sayi span{font-size:.82rem;line-height:1.3}

  /* Fırsat kartları: açıklama 4 satır (tamamı "Detay"da), düğme tam genişlik */
  .hesap-sayfa .firsat-tanim{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
  .hesap-sayfa .firsat-alt{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .hesap-sayfa .firsat-alt .btn{width:100%;min-height:var(--m-dokun);border-radius:var(--m-r)}
  .hesap-sayfa .firsat-cevap:empty{display:none}

  /* genel düğmeler: kartlardaki ana düğmeler büyük ve yuvarlak köşeli */
  .hesap-sayfa .form-kart .btn,.hesap-sayfa .panel-kart .btn{min-height:48px;border-radius:var(--m-r)}

  /* Destek: simge solda, yazı sağda; kısa satır kartlar */
  .hesap-sayfa .kart-izgara{gap:10px}
  .hesap-sayfa .kart-izgara>.form-kart{margin:0}
  .hesap-sayfa .destek-kart{grid-template-columns:42px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;padding:16px}
  .hesap-sayfa .destek-kart .ikon-daire{grid-row:span 2}
  .hesap-sayfa .destek-kart small{font-size:.85rem;line-height:1.4}

  /* alt sekme çubuğu: seçili sekme belirgin hap, simgeler biraz büyük */
  .hesap-sayfa .sekmeler{padding-top:6px}
  .hesap-sayfa .sekmeler svg{width:22px;height:22px}
  .hesap-sayfa .sekmeler button{font-size:11.5px;padding:6px 4px}
  .hesap-sayfa .sekmeler button[aria-selected="true"] svg{stroke-width:2}
}

/* ══ Aşama 2: giriş kodu, 6 kutu (js/giris.js). Asıl alan şeffaf tek input; kutular rakamları gösterir ══ */
.kod-kutular{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;max-width:360px;cursor:text}
.kod-kutular span{display:grid;place-items:center;aspect-ratio:5/6;min-height:52px;border-radius:14px;border:1px solid var(--line-2);
  background:var(--bg-2);font:600 26px/1 var(--mono);color:var(--text);transition:border-color .15s,box-shadow .15s,transform .15s}
.kod-kutular span.dolu{border-color:var(--gold-lo)}
.kod-kutular span.simdi{border-color:var(--gold);box-shadow:0 0 0 3px rgba(210,166,0,.22)}
.kod-kutular span.simdi:empty::after{content:"";width:2px;height:26px;background:var(--gold-hi);animation:kod-imlec 1s steps(2) infinite}
@keyframes kod-imlec{50%{opacity:0}}
.kod-kutular .kod-alan{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px!important;letter-spacing:0;
  color:transparent;caret-color:transparent;background:transparent;border:0;padding:0;min-height:0}
.kod-kutular .kod-alan:focus{outline:none}
.kod-kutular:focus-within{outline:none}
@media(prefers-reduced-motion:reduce){.kod-kutular span.simdi:empty::after{animation:none}}

/* ══ Aşama 3: vitrin sayfaları (ana sayfa, influencer, marka; yalnızca telefon) ══════════════════════════ */
.alt-cta{display:none}
@media(max-width:820px){
  /* VAR / YOK / ASLA: yana kaydırılan kartlar (alt alta uzun liste yerine); filtre çipleri aynen çalışır */
  .ledger{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    border-top:0;margin-inline:calc(-1 * var(--m-kenar));padding:4px var(--m-kenar) 14px;scroll-padding-inline:var(--m-kenar);
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ledger::-webkit-scrollbar{display:none}
  .ledger .row{scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid var(--line);
    border-radius:var(--m-r-kart);background:var(--m-kart-zemin);box-shadow:var(--m-golge)}
  .ledger .row[hidden]{display:none}
  .ledger .row h3{font-size:1.12rem}
  .ledger .row p{font-size:.95rem;line-height:1.5}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--m-kenar));padding-inline:var(--m-kenar)}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none;min-height:40px}

  /* sekme seçici (Marka / Influencer): tam genişlik, eşit parçalar */
  .tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%}
  .tab{min-height:44px;padding-inline:10px}

  /* alt "Başvur" çubuğu (js/menu.js) */
  .alt-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:24;padding:10px var(--m-kenar) calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(23,19,13,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);
    transform:translateY(110%);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
  .alt-cta.acik{transform:none}
  .alt-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .alt-cta .btn{width:100%;min-height:var(--m-dokun);border-radius:var(--m-r);font-size:15px;justify-content:center;padding-inline:10px;white-space:nowrap}
  .alt-cta .kisa{display:none}
  html.alt-cta-acik .wa-yuzen{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  html.menu-acik .alt-cta{display:none}
}

/* ══ Aşama 4: fırsat sayfası (/f/<kod>, firsat.html; yalnızca telefon) ══════════════════════════════════ */
@media(max-width:820px){
  /* ücret / tarih / son başvuru: ikişerli küçük kutular; uzun değerler ("Kimler için") tam satır (js/katilim.js > briefCiz) */
  .katilim-bilgi{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .katilim-bilgi>div{display:grid;grid-template-columns:1fr;gap:4px;padding:12px 14px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line)}
  .katilim-bilgi>div.uzun{grid-column:1/-1}
  .katilim-bilgi dt{font-size:11px}
  .katilim-bilgi dd{color:var(--text);font-weight:600;font-size:.95rem;line-height:1.35}
  .katilim-bilgi>div.uzun dd{font-weight:400;color:var(--text-2)}

  /* Varım / Bu sefer yokum: iki büyük seçim kartı */
  #f-form .secenekler{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  #f-form .cip span{display:grid;place-items:center;min-height:var(--m-dokun);border-radius:var(--m-r);font-size:1rem;font-weight:600;text-align:center}
  #f-form .onay{font-size:.92rem;line-height:1.5}
  #f-form .onay input{width:22px;height:22px}
  #f-brief h3,#f-katilim h2,#f-tesekkur h2{font-size:1.15rem}
  #f-tesekkur .btn{width:100%;min-height:var(--m-dokun);border-radius:var(--m-r)}
}

/* ══ Uygulama olarak ekle: Panel kartı + alttan açılan rehber (js/menu.js > KeineUygulama) ══ */
.uygulama-kart{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 14px;align-items:center}
.uygulama-kart img{width:52px;height:52px;border-radius:14px;grid-row:span 1}
.uygulama-kart b{display:block;font:700 1.02rem/1.25 var(--display)}
.uygulama-kart small{display:block;color:var(--mut);font-size:.88rem;margin-top:2px}
.uygulama-kart .btn{grid-column:1/-1;margin-top:12px;width:100%;min-height:var(--m-dokun);border-radius:var(--m-r);justify-content:center}
.kurulum-perde{position:fixed;inset:0;z-index:1001;background:rgba(0,0,0,.55);opacity:0;transition:opacity .25s}
.kurulum-perde.acik{opacity:1}
.kurulum-sayfa{position:fixed;left:0;right:0;bottom:0;z-index:1002;max-width:520px;margin-inline:auto;background:var(--card);
  border:1px solid var(--line-2);border-bottom:0;border-radius:24px 24px 0 0;padding:10px 20px calc(20px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -20px 50px rgba(0,0,0,.5);transform:translateY(105%);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.kurulum-sayfa.acik{transform:none}
.kurulum-tutamak{width:40px;height:5px;border-radius:3px;background:var(--line-2);margin:0 auto 14px}
.kurulum-ust{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.kurulum-ust img{width:56px;height:56px;border-radius:14px}
.kurulum-ust b{display:block;font:800 1.2rem/1.2 var(--display)}
.kurulum-ust small{color:var(--mut);font-size:.9rem}
.kurulum-adim{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.kurulum-adim li{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:var(--bg-2);border:1px solid var(--line)}
.kurulum-ikon{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line-2);color:var(--gold-hi)}
.kurulum-ikon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kurulum-ikon circle{fill:currentColor;stroke:none}
.kurulum-no{font:700 18px/1 var(--body)}
.kurulum-adim p{margin:0;color:var(--text);line-height:1.35}
.kurulum-adim b{color:var(--gold-hi)}
.kurulum-adim small{display:block;margin-top:3px;color:var(--mut);font-size:.84rem;line-height:1.4}
.kurulum-tamam{width:100%;min-height:var(--m-dokun);border-radius:var(--m-r);justify-content:center}
@media(prefers-reduced-motion:reduce){.kurulum-sayfa,.kurulum-perde{transition:none}}

/* açılıştaki telefon sahnesi: telefonda düğmelerin altında, daha kısa */
@media(max-width:820px){
  .hero .sahne{order:1;min-height:400px;margin-top:6px}
  .sahne-tel{width:180px}
  .sahne-cip{font-size:12px;padding:8px 12px}
  .sahne-cip.c1{left:2%}.sahne-cip.c2{right:2%}
}

/* ek hizmetler (marka sayfası): telefonda kart görünümü, dokunma hedefi geniş */
@media(max-width:820px){
  .hizmet-grup{border-radius:var(--m-r-kart);background:var(--m-kart-zemin);box-shadow:var(--m-golge);padding:14px}
  .hizmet{min-height:56px}
  .hizmet-alt .btn{width:100%;justify-content:center;min-height:48px}
}

/* alt çubukta iki düğme: dar ekranda kısa adlar */
@media(max-width:400px){.alt-cta .tam{display:none}.alt-cta .kisa{display:inline}}

/* hizmetler sayfası: telefonda kart görünümü */
@media(max-width:820px){
  .ana-hizmet{border-radius:var(--m-r-kart);box-shadow:var(--m-golge);padding:20px}
  .ana-govde .cta .btn{width:100%;justify-content:center;min-height:var(--m-dokun)}
  .hizmet-kart{padding:16px}
  .hizmet-kart .teklif{padding:12px 0 4px}
}