/* GP Cephe — ortak tasarım dili (iOS 26/27 "Liquid Glass" esinli).
   Kabuk (www/index.html) ve iki uygulama (cephe, pergola) aynı değişkenleri kullanır.
   Açık/koyu: sistem ayarı; Bilgi ▸ Görünüm ile [data-theme="light|dark"] zorlanabilir. */
:root{
  color-scheme: light dark;
  --gp-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Helvetica Neue", Arial, sans-serif;
  --gp-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Helvetica Neue", Arial, sans-serif;
  --gp-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gp-bg: #F2F2F7;            /* systemGroupedBackground */
  --gp-bg2: #FFFFFF;           /* secondarySystemGroupedBackground */
  --gp-bg3: #F2F2F7;
  --gp-elev: #FFFFFF;
  --gp-label: #000000;
  --gp-label2: rgba(60,60,67,.60);
  --gp-label3: rgba(60,60,67,.30);
  --gp-label4: rgba(60,60,67,.18);
  --gp-sep: rgba(60,60,67,.24);
  --gp-sep-opaque: #C6C6C8;
  --gp-fill: rgba(120,120,128,.20);
  --gp-fill2: rgba(120,120,128,.16);
  --gp-fill3: rgba(118,118,128,.12);
  --gp-fill4: rgba(116,116,128,.08);

  --gp-tint: #CF6A12;          /* marka turuncusu, beyaz metinle okunur ton */
  --gp-tint-hi: #E58A2A;       /* logo / çizim turuncusu */
  --gp-on-tint: #FFFFFF;
  --gp-tint-soft: rgba(207,106,18,.13);
  --gp-navy: #1D3B4F;

  --gp-blue: #007AFF; --gp-green: #34C759; --gp-red: #FF3B30; --gp-yellow: #FFCC00;
  --gp-teal: #30B0C7; --gp-indigo: #5856D6; --gp-purple: #AF52DE; --gp-gray: #8E8E93; --gp-whatsapp: #25D366;

  --gp-glass-bg: rgba(255,255,255,.66);
  --gp-glass-bg-strong: rgba(255,255,255,.84);
  --gp-glass-border: rgba(255,255,255,.75);
  --gp-glass-hair: rgba(0,0,0,.07);
  --gp-glass-shadow: inset 0 .5px 0 rgba(255,255,255,.85), 0 0 0 .5px rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  --gp-blur: saturate(180%) blur(24px);
  --gp-sheet-bg: rgba(242,242,247,.86);
  --gp-scrim: rgba(0,0,0,.28);
  --gp-card: #FFFFFF;
  --gp-thumb: #FFFFFF;
  --gp-menu-bg: rgba(250,250,252,.94);
  --gp-menu-gap: rgba(0,0,0,.06);

  --gp-r-xs: 8px; --gp-r-sm: 12px; --gp-r-md: 16px; --gp-r-lg: 22px; --gp-r-xl: 30px; --gp-r-cap: 999px;
  --gp-ease: cubic-bezier(.32,.72,0,1);
  --gp-ease-out: cubic-bezier(.22,1,.36,1);
  --gp-dur: .42s;

  /* kabuğun ilettiği güvenli alanlar (iframe içinde env() sıfır döner) */
  --gp-sat: env(safe-area-inset-top, 0px);
  --gp-sab: env(safe-area-inset-bottom, 0px);
  --gp-sal: env(safe-area-inset-left, 0px);
  --gp-sar: env(safe-area-inset-right, 0px);
  --gp-tabbar: 0px;            /* yüzen sekme çubuğunun altta kapladığı yükseklik (güvenli alan dahil) */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --gp-bg: #000000; --gp-bg2: #1C1C1E; --gp-bg3: #2C2C2E; --gp-elev: #1C1C1E;
    --gp-label: #FFFFFF; --gp-label2: rgba(235,235,245,.60); --gp-label3: rgba(235,235,245,.30); --gp-label4: rgba(235,235,245,.16);
    --gp-sep: rgba(84,84,88,.62); --gp-sep-opaque: #38383A;
    --gp-fill: rgba(120,120,128,.36); --gp-fill2: rgba(120,120,128,.32); --gp-fill3: rgba(118,118,128,.24); --gp-fill4: rgba(118,118,128,.18);
    --gp-tint: #FF9F45; --gp-tint-hi: #FF9F45; --gp-on-tint: #1E1407; --gp-tint-soft: rgba(255,159,69,.18);
    --gp-blue: #0A84FF; --gp-green: #30D158; --gp-red: #FF453A; --gp-yellow: #FFD60A; --gp-teal: #40C8E0; --gp-indigo: #5E5CE6; --gp-purple: #BF5AF2; --gp-gray: #8E8E93;
    --gp-glass-bg: rgba(44,44,48,.58); --gp-glass-bg-strong: rgba(36,36,40,.82); --gp-glass-border: rgba(255,255,255,.13); --gp-glass-hair: rgba(255,255,255,.06);
    --gp-glass-shadow: inset 0 .5px 0 rgba(255,255,255,.14), 0 0 0 .5px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);
    --gp-sheet-bg: rgba(22,22,24,.9); --gp-scrim: rgba(0,0,0,.5); --gp-card: #2C2C2E; --gp-thumb: #636366; --gp-menu-bg: rgba(44,44,48,.95); --gp-menu-gap: rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --gp-bg: #000000; --gp-bg2: #1C1C1E; --gp-bg3: #2C2C2E; --gp-elev: #1C1C1E;
  --gp-label: #FFFFFF; --gp-label2: rgba(235,235,245,.60); --gp-label3: rgba(235,235,245,.30); --gp-label4: rgba(235,235,245,.16);
  --gp-sep: rgba(84,84,88,.62); --gp-sep-opaque: #38383A;
  --gp-fill: rgba(120,120,128,.36); --gp-fill2: rgba(120,120,128,.32); --gp-fill3: rgba(118,118,128,.24); --gp-fill4: rgba(118,118,128,.18);
  --gp-tint: #FF9F45; --gp-tint-hi: #FF9F45; --gp-on-tint: #1E1407; --gp-tint-soft: rgba(255,159,69,.18);
  --gp-blue: #0A84FF; --gp-green: #30D158; --gp-red: #FF453A; --gp-yellow: #FFD60A; --gp-teal: #40C8E0; --gp-indigo: #5E5CE6; --gp-purple: #BF5AF2; --gp-gray: #8E8E93;
  --gp-glass-bg: rgba(44,44,48,.58); --gp-glass-bg-strong: rgba(36,36,40,.82); --gp-glass-border: rgba(255,255,255,.13); --gp-glass-hair: rgba(255,255,255,.06);
  --gp-glass-shadow: inset 0 .5px 0 rgba(255,255,255,.14), 0 0 0 .5px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);
  --gp-sheet-bg: rgba(22,22,24,.9); --gp-scrim: rgba(0,0,0,.5); --gp-card: #2C2C2E; --gp-thumb: #636366; --gp-menu-bg: rgba(44,44,48,.95); --gp-menu-gap: rgba(0,0,0,.35);
}

/* ---------- ortak bileşenler (gp- önekli; uygulama sınıflarıyla çakışmaz) ---------- */
.gp-glass{
  background: var(--gp-glass-bg);
  -webkit-backdrop-filter: var(--gp-blur); backdrop-filter: var(--gp-blur);
  box-shadow: var(--gp-glass-shadow);
}
.gp-glass.strong{ background: var(--gp-glass-bg-strong); }
.gp-icon{ width: 22px; height: 22px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gp-icon.fill{ fill: currentColor; stroke: none; }

.gp-iconbtn{
  -webkit-appearance: none; appearance: none; border: 0; margin: 0; padding: 0; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  color: var(--gp-label); font: inherit; -webkit-tap-highlight-color: transparent;
  transition: transform .18s var(--gp-ease-out), background-color .2s, opacity .2s;
}
.gp-iconbtn:active{ transform: scale(.9); }
.gp-iconbtn[disabled]{ opacity: .35; pointer-events: none; }
.gp-iconbtn.tinted{ color: var(--gp-tint); }

.gp-btn{
  -webkit-appearance: none; appearance: none; border: 0; margin: 0; cursor: pointer;
  min-height: 50px; padding: 0 22px; border-radius: var(--gp-r-cap);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 17px/1.2 var(--gp-font); letter-spacing: -.01em; -webkit-tap-highlight-color: transparent;
  background: var(--gp-fill3); color: var(--gp-tint);
  transition: transform .18s var(--gp-ease-out), filter .2s, background-color .2s;
}
.gp-btn:active{ transform: scale(.97); filter: brightness(.94); }
.gp-btn.prominent{ background: var(--gp-tint); color: var(--gp-on-tint); }
.gp-btn.block{ display: flex; width: 100%; }
.gp-btn.small{ min-height: 34px; padding: 0 14px; font-size: 15px; }

.gp-seg{
  display: flex; position: relative; padding: 2px; border-radius: var(--gp-r-cap);
  background: var(--gp-fill3); gap: 0;
}
.gp-seg > button{
  -webkit-appearance: none; appearance: none; border: 0; background: transparent; cursor: pointer;
  flex: 1 1 0; min-width: 0; min-height: 30px; padding: 4px 10px; border-radius: var(--gp-r-cap);
  font: 590 13px/1.2 var(--gp-font); color: var(--gp-label); position: relative; z-index: 1;
  -webkit-tap-highlight-color: transparent; transition: color .2s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gp-seg > button[aria-pressed="true"], .gp-seg > button.on{
  background: var(--gp-thumb); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04);
}

/* iOS ayar listesi (inset grouped) */
.gp-list{ background: var(--gp-bg2); border-radius: var(--gp-r-lg); overflow: hidden; margin: 0 0 22px; }
.gp-list-h{ font: 400 13px/1.3 var(--gp-font); color: var(--gp-label2); text-transform: uppercase; letter-spacing: .02em; margin: 0 20px 7px; }
.gp-list-f{ font: 400 13px/1.35 var(--gp-font); color: var(--gp-label2); margin: -14px 20px 24px; }
.gp-row{
  -webkit-appearance: none; appearance: none; border: 0; background: transparent; margin: 0; width: 100%;
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 16px; position: relative;
  font: 400 17px/1.25 var(--gp-font); color: var(--gp-label); text-align: start; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color .15s;
}
.gp-row:active{ background: var(--gp-fill4); }
.gp-row + .gp-row::before{ content: ""; position: absolute; top: 0; inset-inline-start: 62px; inset-inline-end: 0; height: .5px; background: var(--gp-sep); }
.gp-row.noicon + .gp-row::before, .gp-row + .gp-row.noicon::before{ inset-inline-start: 16px; }
.gp-row .tile{ width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; background: var(--gp-gray); }
.gp-row .tile .gp-icon{ width: 19px; height: 19px; stroke-width: 2; }
.gp-row .txt{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gp-row .txt small{ font-size: 13px; color: var(--gp-label2); line-height: 1.3; }
.gp-row .val{ color: var(--gp-label2); font-size: 17px; white-space: nowrap; }
.gp-row .chev{ width: 13px; height: 13px; color: var(--gp-label3); stroke-width: 2.6; flex: none; }
[dir="rtl"] .gp-row .chev{ transform: scaleX(-1); }

.gp-toast{
  position: fixed; left: 50%; top: calc(var(--gp-sat) + 10px); z-index: 9999; pointer-events: none;
  transform: translate(-50%, -14px) scale(.96); opacity: 0;
  padding: 11px 18px; border-radius: var(--gp-r-cap); max-width: min(88vw, 520px);
  font: 590 15px/1.25 var(--gp-font); color: var(--gp-label); text-align: center;
  transition: opacity .25s, transform .35s var(--gp-ease-out);
}
.gp-toast.on{ opacity: 1; transform: translate(-50%, 0) scale(1); }

/* modal sayfa (hoş geldiniz / yenilikler / izin) */
.gp-modal{ position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; justify-content: center; }
.gp-modal .scrim{ position: absolute; inset: 0; background: var(--gp-scrim); opacity: 0; transition: opacity .3s; }
.gp-modal .pane{
  position: relative; width: min(100%, 560px); max-height: calc(100% - var(--gp-sat) - 10px); overflow: auto;
  background: var(--gp-bg2); border-radius: var(--gp-r-xl) var(--gp-r-xl) 0 0;
  padding: 34px 26px calc(var(--gp-sab) + 22px); transform: translateY(100%); transition: transform .5s var(--gp-ease);
  box-shadow: 0 -10px 40px rgba(0,0,0,.18); color: var(--gp-label); font-family: var(--gp-font);
}
@media (min-width: 700px){ .gp-modal{ align-items: center; } .gp-modal .pane{ border-radius: var(--gp-r-xl); transform: translateY(40px) scale(.96); opacity: 0; transition: transform .45s var(--gp-ease), opacity .3s; } }
.gp-modal.on .scrim{ opacity: 1; }
.gp-modal.on .pane{ transform: none; opacity: 1; }
.gp-modal h2{ font: 700 30px/1.15 var(--gp-font-display); letter-spacing: -.02em; text-align: center; margin: 6px 0 26px; }
.gp-modal .feat{ display: flex; gap: 16px; align-items: flex-start; margin: 0 0 22px; }
.gp-modal .feat .gp-icon{ width: 34px; height: 34px; color: var(--gp-tint); stroke-width: 1.6; margin-top: 2px; }
.gp-modal .feat b{ display: block; font: 600 16px/1.3 var(--gp-font); margin-bottom: 2px; }
.gp-modal .feat span{ font: 400 15px/1.35 var(--gp-font); color: var(--gp-label2); }
.gp-modal .gp-btn{ margin-top: 10px; }

/* ---------- iPhone Duo (katlanabilir) ----------
   Kabuk katlanma şeridini iletir (ui/app-bridge.js, GPFold): --gp-fold-l/-r/-t/-b şeridin kenarları (CSS px).
   html.gp-split: açık, dikey katlanma (iki yarıya da içerik sığar) · html.gp-fold-h: döndürülmüş, yatay katlanma ·
   html.gp-fold-on: kitap / dizüstü pozu (şerit etkin). */
/* iki sütunlu sayfa (Bilgi, Hesabım): sütun boşluğu katlanma şeridine denk gelir; kapsayıcının yatay dolgusu 16px + güvenli alan.
   .gp-ca sol üst, .gp-cc sol alt, .gp-cb sağ sütun (tek sütunda sıra: ca, cb, cc). */
/* Duo'da üst güvenli alan 0 (durum çubuğu yandaki sütunda): yüzen öğeler yuvarlak üst kenara yapışmasın diye en az 10px pay.
   Çerçeveler (cephe, pergola) aynı değeri kabuktan alır (index.html measure). */
html.gp-duo-inner, html.gp-duo-outer{ --gp-sat: max(env(safe-area-inset-top, 0px), 10px); }
html.gp-split .gp-cols{
  max-width: none !important; margin: 0 !important; display: grid; align-items: start;
  grid-template-columns: calc(var(--gp-fold-l) - var(--gp-sal) - 32px) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: calc(var(--gp-fold-r) - var(--gp-fold-l) + 32px);
}
html.gp-split .gp-cols > .gp-ca{ grid-column: 1; grid-row: 1; min-width: 0; }
html.gp-split .gp-cols > .gp-cc{ grid-column: 1; grid-row: 2; min-width: 0; }
html.gp-split .gp-cols > .gp-cb{ grid-column: 2; grid-row: 1 / span 3; min-width: 0; }
/* sayfalar sol yarının (geniş olan) ortasında, bildirim baloncuğu sağ yarıda: hiçbiri katlanma çizgisinin üstüne düşmez */
html.gp-split .gp-modal{ padding: 0 calc(100% - var(--gp-fold-l) + 16px) 0 calc(var(--gp-sal) + 16px); }
html.gp-split .gp-toast{ left: calc((var(--gp-fold-r) + 100% - var(--gp-sar)) / 2); max-width: calc(100% - var(--gp-fold-r) - var(--gp-sar) - 24px); }
/* dizüstü pozu: alt sayfa alt yarıda kalır (içeriği kayar) */
html.gp-fold-h.gp-fold-on .gp-modal .pane{ max-height: calc(100% - var(--gp-fold-b) - 8px); }

@media (prefers-reduced-motion: reduce){
  .gp-modal .pane, .gp-toast, .gp-iconbtn, .gp-btn{ transition: none !important; }
}