/* ==========================================================================
   Voltran v5 · mobil uygulama kabuğu
   Ozan (2026-09-22): "sitenin mobil görünümü uygulama gibi gözüksün, altta
   navbar, butonlar". Masaüstüne dokunmaz; her şey ≤940px'te devreye girer.

   Kabuk: üstte uygulama çubuğu (ana sekmede logo, alt sayfada geri + ad),
   altta beş sekmeli çubuk, arada içerik. İki çubuk da mürekkep: makine
   kenarları, içerik ortada. Etkin sekmenin işareti ürün sayfasında o ürünün
   bölüm rengini alır (renk yine bir şey söylüyor, süs değil).

   Yuvarlaklık hiyerarşiye göre değişir, hepsine aynı köşe verilmez:
   alt tabaka 20 · gruplu liste 14 · düğme 12 · segment 9 · simge %22.
   ========================================================================== */

:root {
  --ust-h: 56px;
  --sekme-h: 58px;
  --r-grup: 14px;
  --r-dugme: 12px;
  --satir-bas: #E9E9E3;   /* dokunulan satırın zemini */
}

/* Masaüstünde yalnız mobilin parçaları gizli */
.bar__geri,
.bar__baslik,
.sekme,
.yasal-nav__kisa { display: none; }

@media (max-width: 940px) {

  /* Kısa sayfada künyenin altı ve iOS'un esneyen kenarları künye renginde:
     sayfa tabanı alt çubukla birleşir, beton boşluk kalmaz. */
  html { -webkit-tap-highlight-color: transparent; background: #101214; }

  /* ---------- üst uygulama çubuğu ---------- */

  .bar {
    height: calc(var(--ust-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(var(--yan), env(safe-area-inset-right)) 0 max(var(--yan), env(safe-area-inset-left));
    gap: 6px;
    background: rgba(22, 24, 26, .9);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
  }

  .bar__nav { display: none; }
  .bar__marka img { height: 30px; }

  .bar__ara {
    margin-left: auto;
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    color: #E9E9E4;
  }
  .bar__ara svg { width: 18px; height: 18px; }
  .bar__ara span,
  .bar__ara kbd { display: none; }
  .bar__ara:active { background: rgba(255, 255, 255, .16); }

  .bar--alt .bar__marka { display: none; }

  .bar__geri {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    margin-left: -10px;
    border-radius: 50%;
    color: #E9E9E4;
  }
  .bar__geri:active { background: rgba(255, 255, 255, .1); }

  /* Başlık sayfadaki büyük ad kaydırılıp çıkınca belirir (kabuk.js), iOS'taki
     büyük başlık davranışı. JS yoksa hep görünür. */
  .bar__baslik {
    display: block;
    flex: 1;
    min-width: 0;
    font-family: var(--f-baslik);
    font-weight: 700;
    font-variation-settings: 'wdth' 100;
    font-size: 1.06rem;
    letter-spacing: -.005em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .2s ease, transform .2s ease;
  }
  .js .bar--izle .bar__baslik { opacity: 0; transform: translateY(4px); }
  .js .bar--izle.bar--baslikli .bar__baslik { opacity: 1; transform: none; }

  /* ---------- alt sekme çubuğu ---------- */

  .sekme {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--sekme-h) + env(safe-area-inset-bottom));
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: rgba(22, 24, 26, .94);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--cizgi-koyu);
  }

  .sekme__o {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #80878D;
    text-decoration: none;
    font-family: var(--f-govde);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .01em;
    white-space: nowrap;
    transition: color .15s ease;
  }

  .sekme__o svg { width: 24px; height: 24px; transition: transform .18s ease; }
  .sekme__o:active svg { transform: scale(.86); }

  .sekme__o[aria-current="page"] { color: var(--kagit); }
  .sekme__o[aria-current="page"] svg { stroke-width: 2; }
  .sekme__o[aria-current="page"]::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    width: 28px;
    height: 2px;
    margin-left: -14px;
    border-radius: 0 0 2px 2px;
    background: var(--sekme-vurgu, var(--kagit));
  }

  /* Klavye açıkken (Android görünümü küçültür) çubuk formun üstüne binmesin. */
  body:has(:is(input, textarea, select):focus) .sekme { display: none; }

  /* ---------- künye (alt bilgi) ---------- */
  /* Sistemler/Çözümler/Kurumsal/İletişim zaten sekmede: yasal kalır. */

  /* Sekme çubuğunun payı gövdeye değil künyeye verilir: gövdenin altı beton
     kalıp çubuğun arkasında açık bir şerit gösteriyordu. */
  .kunye { padding-block: 18px calc(22px + var(--sekme-h) + env(safe-area-inset-bottom)); }
  .kunye__ic { gap: 8px 18px; }
  .kunye__ic > span:first-child { flex-basis: 100%; }
  .kunye__ic a:nth-of-type(-n+4) { display: none; }

  /* ---------- düğmeler ---------- */

  .dugme {
    min-height: 50px;
    padding: 0 20px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    border-radius: var(--r-dugme);
    font-family: var(--f-govde);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    transition: transform .12s ease, opacity .12s ease, background .12s ease;
  }
  .dugme:hover { transform: none; }
  .dugme:active { transform: scale(.975); opacity: .88; }

  /* Düğme grupları: tam genişlik, ikisi yan yana sığıyorsa yan yana. */
  .plaka-bas__eylem,
  .cagri__yan,
  .dortyuz__eylem {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    width: 100%;
    margin-left: 0;
  }

  .form__alt { display: grid; gap: 12px; }
  .form__alt .dugme { width: 100%; }

  /* ---------- ritim: uygulama daha sık ---------- */

  .bolum { padding-block: 44px; }
  .bolum-bas { margin-bottom: 22px; }

  /* ---------- kaydırmalı şerit (ekranlar, komşular, ekip) ---------- */

  .komsu,
  .ekip {
    display: flex;
    gap: 12px;
    margin-inline: calc(-1 * var(--yan));
    padding: 2px var(--yan) 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--yan);
    scrollbar-width: none;
    background: none;
    border: 0;
  }
  .komsu::-webkit-scrollbar,
  .ekip::-webkit-scrollbar,
  .plaka-ekran::-webkit-scrollbar { display: none; }

  .komsu__k {
    flex: 0 0 min(78vw, 320px);
    scroll-snap-align: start;
    border-radius: var(--r-grup);
    background: var(--kagit);
  }
  .komsu__k:hover { background: var(--kagit); }
  .komsu__k:active { background: var(--satir-bas); }

  .kisi {
    flex: 0 0 min(62vw, 250px);
    scroll-snap-align: start;
  }
  .kisi__foto { border-radius: var(--r-grup); }

  /* ---------- gruplu listeler (açık zemin) ---------- */

  .ozellikler,
  .ilkeler,
  .sektorler,
  .ofisler,
  .dizin-liste {
    grid-template-columns: 1fr;
    border: 0;
    border-radius: var(--r-grup);
    overflow: hidden;
  }
  .ozellik,
  .ilke,
  .sektor,
  .ofis { background: var(--kagit); }

  .kapi__kutu {
    border: 0;
    border-radius: var(--r-grup);
    background: var(--kagit);
    overflow: hidden;
  }

  .nerede {
    border: 0;
    border-radius: var(--r-grup);
    overflow: hidden;
    background: var(--kagit);
  }

  /* Doğrudan iletişim satırları: dokunulan satır (mailto / tel) */
  .dogrudan {
    border-top: 0;
    border-radius: var(--r-grup);
    background: var(--kagit);
    overflow: hidden;
  }
  .dogrudan__satir { padding: 14px 16px; }
  .dogrudan__satir:last-child { border-bottom: 0; }
  a.dogrudan__satir:active { background: var(--satir-bas); }

  .tescil {
    border-top: 0;
    border-radius: var(--r-grup);
    background: var(--kagit);
    overflow: hidden;
  }
  .tescil__satir { padding-inline: 16px; }
  .tescil__satir:last-child { border-bottom: 0; }

  /* ---------- sistem dizini: uygulama listesi ---------- */

  .dizin-grup { padding-block: 30px; }
  .dizin-grup__bas { margin-bottom: 14px; flex-wrap: wrap; }

  .dizin-k {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 13px;
    padding: 14px 40px 14px 14px;
    background: var(--kagit);
  }
  .dizin-k:hover { background: var(--kagit); }
  .dizin-k:active { background: var(--satir-bas); }
  .dizin-k__ust { display: contents; }
  .dizin-k__logo { grid-column: 1; grid-row: 1 / span 4; width: 44px; height: 44px; }
  .dizin-k__ad { grid-column: 2; font-size: 1.08rem; }
  .dizin-k__tip { grid-column: 2; margin: 3px 0 6px; }
  .dizin-k__is {
    grid-column: 2;
    margin: 0;
    font-size: .86rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .dizin-k__alt { grid-column: 2; margin-top: 8px; padding-top: 0; border-top: 0; }
  .dizin-k__git { display: none; }

  /* Satırın sağındaki ok: dokunulabilir liste satırı olduğunu söyler. */
  .dizin-k::after,
  .cizelge tbody tr::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 17px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-top: 1.8px solid #A2A8AD;
    border-right: 1.8px solid #A2A8AD;
    transform: rotate(45deg);
  }

  /* ---------- ürün sayfası: uygulama mağazası düzeni ---------- */

  .plaka-bas { padding-block: 22px 26px; }
  .plaka-bas > .kap { display: flex; flex-direction: column; }
  .plaka-bas__geri { display: none; }
  .plaka-bas__ic { display: contents; }

  .plaka-bas__metin {
    order: 1;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 15px;
    align-items: start;
  }
  .plaka-bas__kimlik { display: contents; }
  .plaka-bas__logo {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 76px;
    height: 76px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  }
  .plaka-bas__kimlik h1 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: clamp(1.7rem, 7.4vw, 2.3rem);
    line-height: 1;
    text-shadow: none;
  }
  .plaka-bas__tip {
    grid-column: 2;
    grid-row: 2;
    margin: 6px 0 0;
    font-size: .64rem;
    letter-spacing: .12em;
  }
  .plaka-bas__ust {
    grid-column: 2;
    grid-row: 3;
    margin: 9px 0 0;
    gap: 6px;
  }
  .plaka-bas__dert {
    grid-column: 1 / -1;
    margin: 22px 0 20px;
    font-size: 1.02rem;
  }
  /* Ürün sitesi adı + "Bu sistemi konuşalım" yan yana sığmıyor: alt alta. */
  .plaka-bas__eylem { grid-column: 1 / -1; grid-template-columns: 1fr; max-width: 460px; }

  /* Birincil eylem "Bu sistemi konuşalım" (son düğme) önde ve dolu;
     ürün sitesi ikincil, mürekkebin bir ton açığı. */
  .plaka-bas__eylem .dugme:last-child { order: -1; }
  .plaka-bas__eylem .dugme:not(:last-child) {
    background: var(--murekkep-3);
    color: var(--kagit);
  }

  /* ekranlar: kaydırmalı ekran şeridi (mağaza sayfasındaki gibi) */
  .plaka-ekran {
    order: 2;
    position: static;
    margin: 24px calc(-1 * var(--yan)) 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--yan);
    scrollbar-width: none;
    pointer-events: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .plaka-ekran__yigin {
    position: static;
    display: flex;
    gap: 10px;
    width: max-content;
    padding: 0 var(--yan);
    transform: none;
  }
  .plaka-ekran__k,
  .plaka-ekran[data-adet="1"] .plaka-ekran__k {
    width: min(80vw, 520px);
    aspect-ratio: 16 / 10;
    margin: 0;
    border-radius: var(--r-grup);
    scroll-snap-align: start;
    box-shadow: none;
  }
  .plaka-ekran__k:nth-child(n) { margin-top: 0; }
  .plaka-ekran__k img { object-position: center top; }

  /* teknik künye: koyu gruplu liste */
  .kunye-kutu,
  .plaka-bas--ekranli .kunye-kutu {
    order: 3;
    margin-top: 22px;
    border: 0;
    border-radius: var(--r-grup);
    background: var(--murekkep-2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .kunye-kutu__bas,
  .kunye-kutu__satir { border-bottom-color: rgba(255, 255, 255, .07); }
  .kunye-kutu__satir { grid-template-columns: 90px minmax(0, 1fr); padding: 12px 16px; }

  /* ---------- ana sayfa ---------- */

  /* Çizelge: tablo yerine dokunulan liste satırı. Ad bağlantısı satırın
     tamamına yayılır; bölge rozetleri (plana götüren düğmeler) üstte kalır. */
  .cizelge tbody {
    display: block;
    border-radius: var(--r-grup);
    background: var(--kagit);
    overflow: hidden;
  }
  .cizelge tbody tr {
    position: relative;
    padding: 14px 40px 14px 16px;
  }
  .cizelge tbody tr:last-child { border-bottom: 0; }
  .cizelge tbody tr:active { background: var(--satir-bas); }
  .cizelge__no { display: none !important; }
  .cizelge__ad a { border-bottom: 0; }
  .cizelge__ad a::after { content: ''; position: absolute; inset: 0; }
  .cizelge__bolgeler { position: relative; z-index: 1; }

  /* Bölüm çekmecesi: tutamaçlı alt tabaka */
  .cekmece {
    max-height: 78vh;
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    overflow: hidden;
  }
  .cekmece::before {
    content: '';
    flex: none;
    width: 38px;
    height: 5px;
    margin: 8px auto 0;
    border-radius: 3px;
    background: rgba(22, 24, 26, .2);
  }
  .plaka { border-radius: var(--r-dugme); }
  .cekmece__kapat { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(22, 24, 26, .07); }

  .serit__hucre:active { background: transparent; }

  /* ---------- yasal: segment kontrolü ---------- */

  .yasal-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    padding: 3px;
    margin-bottom: 26px;
    background: var(--beton-koyu);
    border-radius: 11px;
  }
  .yasal-nav a {
    padding: 8px 4px;
    border: 0;
    border-radius: 9px;
    text-align: center;
    font-family: var(--f-govde);
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #4B5157;
  }
  .yasal-nav a[aria-current="page"] {
    background: var(--kagit);
    color: var(--murekkep);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
  }
  .yasal-nav__uzun {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .yasal-nav__kisa { display: inline; }

  /* ---------- form ---------- */

  .alan input,
  .alan select,
  .alan textarea {
    min-height: 50px;
    border-radius: var(--r-dugme);
    font-size: 16px;   /* iOS 16px altında odaklanınca sayfayı büyütür */
  }
  .alan textarea { min-height: 140px; }

  /* ---------- arama: tam ekran ---------- */

  html.ara-acik,
  html.ara-acik body { overflow: hidden; }

  .ara-katman {
    padding: 0;
    background: var(--kagit);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .ara {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .ara__ust {
    gap: 4px;
    padding: calc(env(safe-area-inset-top) + 8px) 6px 10px 14px;
    background: var(--murekkep);
    border-bottom: 0;
  }
  .ara__giris {
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 16px;
  }
  .ara__giris::placeholder { color: #8B9197; }
  .ara__kapat {
    display: block;
    flex: none;
    padding: 10px 10px;
    color: #E9E9E4;
    font-size: .95rem;
    font-weight: 500;
  }
  .ara__liste {
    flex: 1;
    max-height: none;
    padding: 8px 8px calc(16px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  .ara__ogr {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: var(--r-dugme);
  }
  .ara__logo,
  .ara__cip { grid-row: 1 / span 2; width: 36px; height: 36px; }
  .ara__cip { border-radius: 22%; }
  .ara__ad { align-self: end; }
  .ara__tip { align-self: start; }
  /* Klavye vurgusu dokunmatikte ilk satırı seçili gösteriyordu. */
  .ara__ogr.is-etkin { background: none; color: inherit; }
  .ara__ogr.is-etkin .ara__tip { color: var(--celik); }
  .ara__ogr:active { background: var(--satir-bas); }
  .ara__alt { display: none; }
}

/* ---------- sayfalar arası geçiş (uygulama gibi) ----------
   Çubuklar yerinde durur, içerik hafifçe yükselerek gelir. Destekleyen
   tarayıcıda (Chrome 126+, Safari 18.2+) çalışır, diğerlerinde düz geçer. */
@media (max-width: 940px) and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  .bar { view-transition-name: ust-cubuk; }
  .sekme { view-transition-name: sekme-cubuk; }

  ::view-transition-old(root) { animation: 140ms ease-out both vt-cik; }
  ::view-transition-new(root) { animation: 240ms cubic-bezier(.2, .8, .25, 1) both vt-gel; }
  ::view-transition-group(sekme-cubuk) { animation: none; }
}

@keyframes vt-cik { to { opacity: 0; } }
@keyframes vt-gel { from { opacity: 0; transform: translateY(12px); } }