/* "Cam" görünümü: iOS 26 "Liquid Glass" diline yakın buzlu cam tasarım.
   Yüzen, bulanık yarı saydam kartlar; hap biçimli düğmeler; yumuşak renkli zemin; sistem yazı tipi ve Apple sistem renkleri.
   Yalnızca <html data-gorunum="cam"> iken etkindir; "sade" görünüm app.css'teki eski tasarımdır.
   Vurgu rengi data-vurgu, arka plan data-duvar, açık/koyu data-tema ile seçilir. */

/* ---------------------------------------------------------------- renkler */
:root[data-gorunum="cam"] {
  /* Apple Human Interface Guidelines sistem renkleri (açık görünüm) */
  --zemin: #eef1f6;
  --metin: #000; --soluk: rgba(60, 60, 67, .6);      /* label, secondaryLabel */
  --cizgi: rgba(0, 0, 0, .06); --cizgi-koyu: rgba(60, 60, 67, .29);   /* separator */
  --yuzey: rgba(255, 255, 255, .55); --yuzey-2: rgba(255, 255, 255, .35); --uzerinde: rgba(120, 120, 128, .12); /* fill */
  --girdi: rgba(255, 255, 255, .7); --girdi-kenar: #fff; --cam-kenar: rgba(255, 255, 255, .75);
  --cam-golge: 0 0 0 .5px rgba(0, 0, 0, .04), 0 10px 30px rgba(0, 0, 0, .06);
  --golge: var(--cam-golge); --cam-bulanik: saturate(180%) blur(30px);
  --yari-cap: 24px; --yari-cap-kucuk: 14px;
  /* menü ve üst çubuk camı, düğme camı, seçili menü öğesi */
  --kenar-yuzey: rgba(255, 255, 255, .6); --kenar-kenar: rgba(255, 255, 255, .9);
  --dugme-zemin: rgba(255, 255, 255, .6); --dugme-kenar: #fff; --dugme-parlama: inset 0 1px 0 #fff; --dugme-metin: #000;
  --secili: #fff; --secili-golge: 0 0 0 .5px rgba(0, 0, 0, .05), 0 2px 8px rgba(0, 0, 0, .08);
  --menu-ikon: #007aff;
  --vurgu-acik: color-mix(in srgb, var(--vurgu) 15%, transparent);
  --bilgi: #007aff; --bilgi-zemin: rgba(0, 122, 255, .1); --bilgi-cizgi: rgba(0, 122, 255, .25);
  --ok: #34c759; --ok-metin: #1f9d47; --ok-zemin: rgba(52, 199, 89, .16); --ok-cizgi: rgba(52, 199, 89, .3);
  --uyari: #ff9500; --uyari-metin: #c26f00; --uyari-zemin: rgba(255, 149, 0, .16); --uyari-cizgi: rgba(255, 149, 0, .32);
  --hata: #ff3b30; --hata-metin: #d70015; --hata-zemin: rgba(255, 59, 48, .12); --hata-cizgi: rgba(255, 59, 48, .3);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI",
    Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root[data-gorunum="cam"][data-tema="koyu"] {
  /* Koyu görünüm */
  --zemin: #0b0d12; --metin: #fff; --soluk: rgba(235, 235, 245, .6);
  --cizgi: rgba(255, 255, 255, .08); --cizgi-koyu: rgba(84, 84, 88, .65);
  --yuzey: rgba(30, 32, 40, .55); --yuzey-2: rgba(255, 255, 255, .04); --uzerinde: rgba(120, 120, 128, .24);
  --girdi: rgba(255, 255, 255, .08); --girdi-kenar: rgba(255, 255, 255, .14); --cam-kenar: rgba(255, 255, 255, .12);
  --cam-golge: 0 10px 30px rgba(0, 0, 0, .35);
  --kenar-yuzey: rgba(30, 32, 40, .5); --kenar-kenar: rgba(255, 255, 255, .1);
  --dugme-zemin: rgba(255, 255, 255, .1); --dugme-kenar: rgba(255, 255, 255, .16);
  --dugme-parlama: inset 0 1px 0 rgba(255, 255, 255, .14); --dugme-metin: #fff;
  --secili: rgba(255, 255, 255, .14); --secili-golge: 0 2px 8px rgba(0, 0, 0, .3);
  --menu-ikon: #0a84ff;
  --vurgu-acik: color-mix(in srgb, var(--vurgu) 24%, transparent);
  --bilgi: #0a84ff; --bilgi-zemin: rgba(10, 132, 255, .18); --bilgi-cizgi: rgba(10, 132, 255, .35);
  --ok: #30d158; --ok-metin: #30d158; --ok-zemin: rgba(48, 209, 88, .18); --ok-cizgi: rgba(48, 209, 88, .35);
  --uyari: #ff9f0a; --uyari-metin: #ff9f0a; --uyari-zemin: rgba(255, 159, 10, .18); --uyari-cizgi: rgba(255, 159, 10, .35);
  --hata: #ff453a; --hata-metin: #ff453a; --hata-zemin: rgba(255, 69, 58, .18); --hata-cizgi: rgba(255, 69, 58, .35);
}
:root[data-gorunum="cam"] body { font-family: inherit; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-size: 14px; letter-spacing: -.003em; }

/* Vurgu renkleri: Apple sistem renkleri (systemBlue, systemPurple, systemGreen, systemOrange, systemPink) */
:root[data-gorunum="cam"][data-vurgu="mavi"] { --vurgu: #007aff; --vurgu-koyu: #0062cc; }
:root[data-gorunum="cam"][data-vurgu="mor"] { --vurgu: #af52de; --vurgu-koyu: #9440c2; }
:root[data-gorunum="cam"][data-vurgu="yesil"] { --vurgu: #34c759; --vurgu-koyu: #28a745; }
:root[data-gorunum="cam"][data-vurgu="turuncu"] { --vurgu: #ff9500; --vurgu-koyu: #e08600; }
:root[data-gorunum="cam"][data-vurgu="pembe"] { --vurgu: #ff2d55; --vurgu-koyu: #e0264a; }
:root[data-gorunum="cam"][data-tema="koyu"][data-vurgu="mavi"] { --vurgu: #0a84ff; --vurgu-koyu: #409cff; }
:root[data-gorunum="cam"][data-tema="koyu"][data-vurgu="mor"] { --vurgu: #bf5af2; --vurgu-koyu: #da8fff; }
:root[data-gorunum="cam"][data-tema="koyu"][data-vurgu="yesil"] { --vurgu: #30d158; --vurgu-koyu: #5de07d; }
:root[data-gorunum="cam"][data-tema="koyu"][data-vurgu="turuncu"] { --vurgu: #ff9f0a; --vurgu-koyu: #ffb340; }
:root[data-gorunum="cam"][data-tema="koyu"][data-vurgu="pembe"] { --vurgu: #ff375f; --vurgu-koyu: #ff6482; }

/* ---------------------------------------------------------------- arka plan (duvar)
   Varsayılan (gece): renksiz, beyaz tonlu zemin; üstte beyaz ışık, altta çok hafif gri derinlik. */
:root[data-gorunum="cam"] body { background-color: var(--zemin); background-attachment: fixed; min-height: 100vh; }
:root[data-gorunum="cam"][data-duvar="gece"] body { background-color: #f5f6f8;
  background-image: radial-gradient(70vw 70vh at 15% 0%, #fff, transparent 70%),
    radial-gradient(60vw 60vh at 100% 100%, rgba(0, 0, 0, .035), transparent 70%),
    linear-gradient(180deg, #fafbfc, #f1f2f5); }
:root[data-gorunum="cam"][data-duvar="okyanus"] body {
  background-image: radial-gradient(60vw 60vh at 0% 0%, #c9ecf5, transparent 70%),
    radial-gradient(55vw 55vh at 100% 0%, #cfe3ff, transparent 70%),
    radial-gradient(60vw 60vh at 100% 100%, #d4f1fb, transparent 70%); }
:root[data-gorunum="cam"][data-duvar="gunbatimi"] body {
  background-image: radial-gradient(60vw 60vh at 0% 0%, #ffe3c4, transparent 70%),
    radial-gradient(55vw 55vh at 100% 0%, #fff1c2, transparent 70%),
    radial-gradient(60vw 60vh at 100% 100%, #ffd3df, transparent 70%); }
:root[data-gorunum="cam"][data-duvar="kul"] body {
  background-image: radial-gradient(60vw 60vh at 0% 0%, #dfe2e8, transparent 70%),
    radial-gradient(60vw 60vh at 100% 100%, #d6d8de, transparent 70%); }
/* Koyu görünüm: aynı lekelerin koyu, kısık tonları */
:root[data-gorunum="cam"][data-tema="koyu"][data-duvar="gece"] body { background-color: #0d0e11;
  background-image: radial-gradient(70vw 70vh at 15% 0%, rgba(255, 255, 255, .06), transparent 70%),
    linear-gradient(180deg, #121317, #0b0c0f); }
:root[data-gorunum="cam"][data-tema="koyu"][data-duvar="okyanus"] body {
  background-image: radial-gradient(60vw 60vh at 0% 0%, rgba(48, 176, 199, .26), transparent 70%),
    radial-gradient(60vw 60vh at 100% 100%, rgba(10, 132, 255, .2), transparent 70%); }
:root[data-gorunum="cam"][data-tema="koyu"][data-duvar="gunbatimi"] body {
  background-image: radial-gradient(60vw 60vh at 0% 0%, rgba(255, 149, 0, .22), transparent 70%),
    radial-gradient(60vw 60vh at 100% 100%, rgba(255, 45, 85, .2), transparent 70%); }
:root[data-gorunum="cam"][data-tema="koyu"][data-duvar="kul"] body {
  background-image: radial-gradient(60vw 60vh at 0% 0%, rgba(142, 142, 147, .18), transparent 70%); }

/* ---------------------------------------------------------------- yüzeyler */
:root[data-gorunum="cam"] :is(.panel, .kart, .modul-kart, .pano-sutun, .giris-kutusu, .kullanici-menu,
  .arama-sonuc, .kaydet-kutusu, .sonuc-baslik, .buro-kodu-kutu) {
  background: var(--yuzey); border: 1px solid var(--cam-kenar); box-shadow: var(--cam-golge);
  -webkit-backdrop-filter: var(--cam-bulanik); backdrop-filter: var(--cam-bulanik);
}

/* ---------------------------------------------------------------- düzen: macOS kenar çubuğu ve araç çubuğu */
:root[data-gorunum="cam"] :is(.kenar, .ust) { background: var(--kenar-yuzey); border: 1px solid var(--kenar-kenar);
  box-shadow: var(--cam-golge); -webkit-backdrop-filter: var(--cam-bulanik); backdrop-filter: var(--cam-bulanik); }
:root[data-gorunum="cam"] .kenar { margin: 12px 0 12px 12px; top: 12px; height: calc(100vh - 24px); border-radius: 24px;
  padding: 0 10px; width: 248px; }
:root[data-gorunum="cam"] .kenar .logo { border-bottom: 0; margin: 2px -8px 2px; height: 56px; padding-left: 16px; font-size: 15px;
  font-weight: 600; letter-spacing: -.01em; }
:root[data-gorunum="cam"] .logo-isaret { width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--vurgu) 80%, #fff), var(--vurgu)); font-size: 15px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15), inset 0 .5px 0 rgba(255, 255, 255, .4); }
:root[data-gorunum="cam"] .menu-bolum { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600;
  padding: 14px 10px 4px; color: var(--soluk); }
:root[data-gorunum="cam"] .menu-oge { border-radius: 999px; padding: 7px 12px; gap: 9px; font-size: 13.5px; }
:root[data-gorunum="cam"] .menu-oge .ikon { width: 17px; height: 17px; color: var(--menu-ikon); opacity: 1; }
:root[data-gorunum="cam"] .menu-oge:hover { background: var(--yuzey); }
:root[data-gorunum="cam"] .menu-oge.aktif { background: var(--secili); color: var(--metin); font-weight: 600; box-shadow: var(--secili-golge); }
:root[data-gorunum="cam"] .menu-oge.aktif .ikon { color: var(--menu-ikon); }
:root[data-gorunum="cam"] .menu-grup ul { border-left: 0; margin: 1px 0 4px 26px; padding: 0; }
:root[data-gorunum="cam"] .menu-grup li a { border-radius: 999px; padding: 4px 10px; font-size: 13px; color: var(--soluk); }
:root[data-gorunum="cam"] .menu-grup li a:hover { color: var(--metin); }
:root[data-gorunum="cam"] .menu-grup li a.aktif { background: var(--secili); color: var(--metin); font-weight: 600; box-shadow: var(--secili-golge); }
:root[data-gorunum="cam"] .kenar-alt { background: transparent; border-top: 1px solid var(--cizgi); margin: 0 -10px; padding: 6px 10px 10px; }
:root[data-gorunum="cam"] .ust { margin: 12px 14px 0; top: 12px; height: 56px; border-radius: 22px; padding: 0 12px; }
:root[data-gorunum="cam"] .arama { height: 34px; border-radius: 999px; background: rgba(118, 118, 128, .1); border: 1px solid transparent; }
:root[data-gorunum="cam"] .arama:focus-within { border-color: transparent; background: var(--girdi);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--vurgu) 35%, transparent); }
:root[data-gorunum="cam"] kbd { border-radius: 5px; background: transparent; }
:root[data-gorunum="cam"] .ikon-dugme { width: 34px; height: 34px; border-radius: 50%; }
:root[data-gorunum="cam"] .kullanici summary { border-radius: 999px; }
:root[data-gorunum="cam"] .bas-harf { width: 28px; height: 28px; color: #fff; font-weight: 600;
  background: linear-gradient(180deg, #a1a1a6, #6e6e73); }
:root[data-gorunum="cam"] .kullanici-menu { border-radius: 18px; padding: 6px; }
:root[data-gorunum="cam"] main { padding: 26px 32px 64px; max-width: 1560px; }
:root[data-gorunum="cam"] main:has(> .hesap-duzeni) { max-width: 2200px; }
:root[data-gorunum="cam"] h1 { font-size: 28px; font-weight: 700; letter-spacing: -.022em; line-height: 1.15; margin-bottom: 14px; }
:root[data-gorunum="cam"] h2 { font-size: 19px; font-weight: 600; letter-spacing: -.016em; }
:root[data-gorunum="cam"] h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
:root[data-gorunum="cam"] .kirinti { font-size: 12.5px; }

/* ---------------------------------------------------------------- bileşenler */
:root[data-gorunum="cam"] :is(.kart, .modul-kart, .pano-sutun, .panel) { border-radius: var(--yari-cap); }
:root[data-gorunum="cam"] .kart { padding: 18px 22px; }
:root[data-gorunum="cam"] .kart .sayi { font-weight: 600; letter-spacing: -.02em; }
:root[data-gorunum="cam"] .modul-kart { padding: 16px; }
:root[data-gorunum="cam"] .modul-kart strong { font-weight: 600; letter-spacing: -.01em; }
:root[data-gorunum="cam"] a.modul-kart { transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
:root[data-gorunum="cam"] a.modul-kart:hover { transform: translateY(-1px); border-color: var(--cam-kenar);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .1); }
:root[data-gorunum="cam"] .pano-sutun > header { background: transparent; border-bottom-color: var(--cizgi); }
:root[data-gorunum="cam"] .pano-sutun > header h2 { font-size: 13px; letter-spacing: -.005em; }
:root[data-gorunum="cam"] .panel-baslik { text-transform: none; letter-spacing: -.005em; font-size: 13px; color: var(--metin);
  border-bottom-color: var(--cizgi); }
:root[data-gorunum="cam"] .hesapla-cubugu { background: var(--yuzey); -webkit-backdrop-filter: var(--cam-bulanik);
  backdrop-filter: var(--cam-bulanik); border-radius: 0 0 var(--yari-cap) var(--yari-cap); }
/* Tablolar: iOS "inset grouped" liste görünümü */
:root[data-gorunum="cam"] .tablo { border-collapse: separate; border-spacing: 0; border: 1px solid var(--cam-kenar);
  border-radius: 18px; overflow: hidden; background: var(--yuzey); box-shadow: var(--cam-golge);
  -webkit-backdrop-filter: var(--cam-bulanik); backdrop-filter: var(--cam-bulanik); }
:root[data-gorunum="cam"] .tablo :is(td, th) { border-bottom: 1px solid var(--cizgi); }
:root[data-gorunum="cam"] .tablo thead th { background: var(--yuzey-2); text-transform: none; font-size: 12px; font-weight: 600;
  color: var(--soluk); letter-spacing: 0; }
:root[data-gorunum="cam"] .tablo :is(td, th) { padding: 9px 12px; }
:root[data-gorunum="cam"] .sonuc-alani .tablo :is(td, th) { padding: 8px 10px; }
:root[data-gorunum="cam"] .tablo :is(tfoot th, tr.toplam th, tr.toplam td) { background: var(--yuzey-2); }
:root[data-gorunum="cam"] .tablo tr:last-child > :is(td, th) { border-bottom: 0; }
:root[data-gorunum="cam"] .tablo tbody tr:hover td { background: var(--uzerinde); }
/* Bildirimler: iOS bildirim kartı (malzeme zemin + renkli simge) */
:root[data-gorunum="cam"] .bildirim { position: relative; border-radius: 22px; padding: 14px 18px 14px 50px; border: 1px solid var(--cam-kenar);
  background: var(--yuzey); box-shadow: var(--cam-golge); color: var(--metin);
  -webkit-backdrop-filter: var(--cam-bulanik); backdrop-filter: var(--cam-bulanik); }
:root[data-gorunum="cam"] .bildirim::before { position: absolute; left: 16px; top: 13px; width: 22px; height: 22px; border-radius: 50%;
  color: #fff; font: 700 12px/22px -apple-system, BlinkMacSystemFont, sans-serif; text-align: center; }
:root[data-gorunum="cam"] .bildirim.ok::before { content: "✓"; background: var(--ok); }
:root[data-gorunum="cam"] .bildirim.hata::before { content: "!"; background: var(--hata); }
:root[data-gorunum="cam"] .bildirim.uyari::before { content: "!"; background: var(--uyari); }
:root[data-gorunum="cam"] .bildirim.bilgi::before { content: "i"; background: var(--bilgi); font-family: Georgia, serif; font-style: italic; }
/* Etiketler: tonlu kapsül (renkli yazı, tonlu zemin) */
:root[data-gorunum="cam"] .etiket { border-radius: 999px; padding: 3px 10px; font-weight: 600; font-size: 11.5px;
  background: var(--uzerinde); color: var(--soluk); }
:root[data-gorunum="cam"] :is(.etiket.basarili, .etiket.onayli, .etiket.saglandi, .etiket.tamamlandi) { background: var(--ok-zemin); color: var(--ok-metin); }
:root[data-gorunum="cam"] :is(.etiket.uyari, .etiket.kosullu, .etiket.dogrulama_bekliyor, .etiket.taslak, .etiket.belirsiz) {
  background: var(--uyari-zemin); color: var(--uyari-metin); }
:root[data-gorunum="cam"] :is(.etiket.hata, .etiket.iptal, .etiket.saglanmadi, .etiket.hak_kazanilmadi) { background: var(--hata-zemin); color: var(--hata-metin); }
:root[data-gorunum="cam"] :is(.etiket.beyana_gore, .etiket.devam, .etiket.hazir) { background: var(--vurgu-acik); color: var(--vurgu); }
/* Onay kutuları: iOS anahtarı; seçenek düğmeleri sistem vurgu rengiyle */
:root[data-gorunum="cam"] input[type="checkbox"] { -webkit-appearance: none; appearance: none; position: relative; flex-shrink: 0;
  width: 38px; height: 23px; padding: 0; margin: 0; border: 0; border-radius: 999px; background: var(--uzerinde); cursor: pointer;
  transition: background .2s ease; vertical-align: middle; }
:root[data-gorunum="cam"] input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 0 0 .5px rgba(0, 0, 0, .04); transition: transform .2s ease; }
:root[data-gorunum="cam"] input[type="checkbox"]:checked { background: var(--ok); }
:root[data-gorunum="cam"] input[type="checkbox"]:checked::after { transform: translateX(15px); }
:root[data-gorunum="cam"] input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--vurgu) 35%, transparent); }
:root[data-gorunum="cam"] input[type="checkbox"]:disabled { opacity: .4; cursor: default; }
:root[data-gorunum="cam"] input[type="radio"] { accent-color: var(--vurgu); }
/* Uyarı ve hata metinleri */
:root[data-gorunum="cam"] .alan-hatasi, :root[data-gorunum="cam"] .karar-not { color: var(--hata-metin); }
:root[data-gorunum="cam"] .param-kutu { color: var(--hata-metin); border-color: var(--hata); background: var(--hata-zemin); }
:root[data-gorunum="cam"] input.gecersiz, :root[data-gorunum="cam"] select.gecersiz { border-color: var(--hata); background: var(--hata-zemin); }
:root[data-gorunum="cam"] .rozet { border-radius: 999px; background: var(--uzerinde); border-color: transparent; }
:root[data-gorunum="cam"] fieldset { border-radius: 18px; background: var(--yuzey-2); border-color: var(--cizgi); }
:root[data-gorunum="cam"] label { font-weight: 500; font-size: 13px; }
:root[data-gorunum="cam"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { border-radius: var(--yari-cap-kucuk); border: 1px solid var(--girdi-kenar);
  background: var(--girdi); padding: 8px 11px; transition: box-shadow .15s ease, border-color .15s ease, background .15s ease; }
:root[data-gorunum="cam"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus { background: var(--yuzey); }
:root[data-gorunum="cam"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus { outline: none; border-color: var(--vurgu);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--vurgu) 30%, transparent); }
:root[data-gorunum="cam"] .arama input[type="search"], :root[data-gorunum="cam"] .arama input[type="search"]:focus,
:root[data-gorunum="cam"] .arama input[type="search"]:not([type="checkbox"]):focus { border: 0; background: none; padding: 0;
  box-shadow: none; border-radius: 0; }
:root[data-gorunum="cam"] .menu-oge .ok { color: var(--soluk); opacity: .7; width: 14px; height: 14px; }
:root[data-gorunum="cam"] .menu-oge.aktif .ok { color: var(--soluk); }
/* Düğmeler: Liquid Glass hap düğmeler. Normal: beyaz cam zemin, beyaz kenar, üstte iç parlama;
   ana: maviden koyu maviye dikey geçiş; tehlikeli işlem: cam zemin üzerinde kırmızı yazı. */
:root[data-gorunum="cam"] :is(button, .dugme) { border-radius: 999px; padding: 9px 18px; font-weight: 600;
  font-size: 14px; letter-spacing: -.01em; background: var(--dugme-zemin); border: 1px solid var(--dugme-kenar);
  box-shadow: var(--dugme-parlama), 0 2px 8px rgba(0, 0, 0, .05); color: var(--dugme-metin);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  transition: opacity .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease; }
:root[data-gorunum="cam"] :is(button, .dugme):hover { background: var(--secili); text-decoration: none; }
:root[data-gorunum="cam"] :is(button, .dugme):active { transform: scale(.97); }
:root[data-gorunum="cam"] :is(button.birincil, .dugme.birincil) { background: linear-gradient(180deg, #3d9bff, #007aff); color: #fff;
  border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px rgba(0, 122, 255, .35); }
:root[data-gorunum="cam"] :is(button.birincil, .dugme.birincil):hover { background: linear-gradient(180deg, #2b8cff, #006ae0); }
:root[data-gorunum="cam"][data-tema="koyu"] :is(button.birincil, .dugme.birincil) { color: #fff;
  background: linear-gradient(180deg, #47a3ff, #0a84ff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 18px rgba(10, 132, 255, .4); }
:root[data-gorunum="cam"] :is(button.tehlike, .dugme.tehlike) { color: #ff3b30; }
:root[data-gorunum="cam"][data-tema="koyu"] :is(button.tehlike, .dugme.tehlike) { color: #ff453a; }
:root[data-gorunum="cam"] :is(button.tehlike, .dugme.tehlike):hover { background: var(--hata-zemin); }
:root[data-gorunum="cam"] button:disabled { opacity: .4; }
:root[data-gorunum="cam"] :is(button.baglanti, .metin-dugme) { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0;
  color: var(--vurgu); }
:root[data-gorunum="cam"] .metin-dugme { color: var(--hata-metin); font-size: 12px; }
:root[data-gorunum="cam"] .kullanici-menu :is(a, button) { border-radius: 999px; box-shadow: none; border: 0; background: none; padding: 7px 12px;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-gorunum="cam"] .kullanici-menu :is(a, button):hover { background: var(--secili); color: var(--metin); }
:root[data-gorunum="cam"] :is(button.kucuk, .dugme.kucuk) { padding: 6px 13px; font-size: 12.5px; border-radius: 999px; }
:root[data-gorunum="cam"] .ikon-dugme { width: 34px; height: 34px; border-radius: 50%; padding: 0; }
:root[data-gorunum="cam"] .ust .ikon-dugme, :root[data-gorunum="cam"] .kenar .ikon-dugme { background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-gorunum="cam"] .ikon-dugme:hover { background: var(--secili); }
:root[data-gorunum="cam"] .dugmeler a[aria-current="page"] { background: var(--secili); border-color: var(--dugme-kenar); color: var(--metin);
  box-shadow: var(--secili-golge); }
:root[data-gorunum="cam"] code { background: var(--uzerinde); border-radius: 5px; }
:root[data-gorunum="cam"] .giris-kutusu { border-radius: 28px; padding: 34px; }
:root[data-gorunum="cam"] .giris-kutusu h1 { font-size: 24px; }
:root[data-gorunum="cam"] .giris-kutusu button.birincil { padding: 10px 18px; font-size: 14px; }
:root[data-gorunum="cam"] .rapor-onizleme { border-radius: 18px; }
:root[data-gorunum="cam"] .param-kutu { border-radius: 10px; }

@media (max-width: 760px) {
  :root[data-gorunum="cam"] .kenar { margin: 12px; top: 12px; height: calc(100vh - 24px); }
  :root[data-gorunum="cam"] .ust { margin: 8px 8px 0; top: 8px; }
  :root[data-gorunum="cam"] main { padding: 18px 16px 48px; }
  :root[data-gorunum="cam"] h1 { font-size: 24px; }
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-gorunum="cam"] { --yuzey: #fff; --kenar-yuzey: #fff; }
  :root[data-gorunum="cam"][data-tema="koyu"] { --yuzey: #1c1c1e; --kenar-yuzey: #1c1c1e; }
}


/* ---------------------------------------------------------------- Ayarlar > Görünüm seçicileri (iki görünümde de) */
.gorunum-secenekleri { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 6px 0 18px; }
.gorunum-kart { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--cizgi);
  border-radius: 14px; background: var(--yuzey); cursor: pointer; font-weight: 500; }
.gorunum-kart input { position: absolute; opacity: 0; pointer-events: none; }
.gorunum-kart:has(input:checked) { border-color: var(--vurgu); box-shadow: 0 0 0 2px var(--vurgu-acik); }
.gorunum-kart:has(input:focus-visible) { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.gorunum-kart .ipucu { margin-top: -4px; }
.onizleme { position: relative; height: 92px; border-radius: 10px; overflow: hidden; border: 1px solid var(--cizgi); background: #e9edf3; }
.onizleme i { position: absolute; display: block; }
.onizleme .o-kenar { left: 6px; top: 6px; bottom: 6px; width: 26%; }
.onizleme .o-ust { left: calc(26% + 12px); right: 6px; top: 6px; height: 14px; }
.onizleme .o-kart { left: calc(26% + 12px); right: 6px; top: 26px; bottom: 6px; }
.onizleme.sade { background: #fafafa; }
.onizleme.sade .o-kenar { left: 0; top: 0; bottom: 0; background: #fff; border-right: 1px solid #e5e7eb; }
.onizleme.sade .o-ust { left: 26%; right: 0; top: 0; height: 16px; background: #fff; border-bottom: 1px solid #e5e7eb; }
.onizleme.sade .o-kart { background: #fff; border: 1px solid #e5e7eb; border-radius: 4px; }
.onizleme.cam { background: linear-gradient(180deg, #fafbfc, #eceef2); }
.onizleme.cam :is(.o-kenar, .o-ust, .o-kart) { background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, .06); }
.renk-secenekleri, .duvar-secenekleri { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 18px; }
.renk-kart, .duvar-kart { position: relative; display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--cizgi);
  border-radius: 999px; background: var(--yuzey); cursor: pointer; font-weight: 500; }
.renk-kart input, .duvar-kart input { position: absolute; opacity: 0; pointer-events: none; }
.renk-kart:has(input:checked), .duvar-kart:has(input:checked) { border-color: var(--vurgu); box-shadow: 0 0 0 2px var(--vurgu-acik); }
.renk-nokta { width: 22px; height: 22px; border-radius: 50%; display: inline-block; }
.renk-nokta.mavi { background: #007aff; } .renk-nokta.mor { background: #af52de; } .renk-nokta.yesil { background: #34c759; }
.renk-nokta.turuncu { background: #ff9500; } .renk-nokta.pembe { background: #ff2d55; }
.duvar-ornek { width: 34px; height: 22px; border-radius: 999px; display: inline-block; border: 1px solid var(--cizgi); }
.duvar-ornek.gece { background: linear-gradient(120deg, #4f46e5, #0ea5e9 55%, #a855f7); }
.duvar-ornek.okyanus { background: linear-gradient(120deg, #14b8a6, #3b82f6 60%, #06b6d4); }
.duvar-ornek.gunbatimi { background: linear-gradient(120deg, #f97316, #ec4899 60%, #eab308); }
.duvar-ornek.kul { background: linear-gradient(120deg, #94a3b8, #64748b); }
.duvar-ornek.duz { background: var(--zemin); }
.gorunum-ayrinti[hidden] { display: none; }
.dugme-ikonlu { display: inline-flex; align-items: center; gap: 6px; }
.dugme-ikonlu .ikon { width: 16px; height: 16px; }
/* Mobil çekmece: cam menü ekranın solundan kayar, arkası karartılır; okunabilirlik için daha opak */
@media (max-width: 760px) {
  :root[data-gorunum="cam"] .kenar { margin: 0; left: 12px; top: 12px; bottom: 12px; height: auto; transform: translateX(calc(-100% - 24px));
    background: rgba(255, 255, 255, .72); border-radius: 24px; }
  :root[data-gorunum="cam"][data-tema="koyu"] .kenar { background: rgba(28, 30, 38, .78); }
  :root[data-gorunum="cam"][data-kenar-mobil="acik"] .kenar { transform: none; }
  :root[data-gorunum="cam"] .kenar .logo { margin-right: 0; }
}
/* Sekmeler: Apple "segmented control" görünümü (iki görünümde de) */
.sekmeler { display: inline-flex; gap: 2px; padding: 3px; margin: 2px 0 22px; border-radius: 10px; background: var(--uzerinde);
  border: 1px solid var(--cizgi); max-width: 100%; overflow-x: auto; }
.sekmeler a { padding: 6px 18px; border-radius: 7px; color: var(--metin); font-weight: 500; font-size: 13.5px; white-space: nowrap; }
.sekmeler a:hover { text-decoration: none; background: var(--uzerinde); }
.sekmeler a[aria-current="page"] { background: var(--yuzey); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .06); }
:root[data-tema="koyu"] .sekmeler a[aria-current="page"] { background: rgba(255, 255, 255, .14); }
:root:not([data-gorunum="cam"]) .sekmeler a[aria-current="page"] { background: var(--yuzey); color: var(--vurgu); }

/* ---------------------------------------------------------------- hesaplama formu: belirgin girdi kutuları
   Girdiler hafif gri dolgu ve görünür ince kenarla çizilir; odakta vurgu renginde halka. Bölüm kutuları
   aynı iç boşlukla; alttaki "Hesapla" çubuğu arkasındaki içerik görünmesin diye neredeyse opak. */
:root[data-gorunum="cam"] { --girdi: rgba(118, 118, 128, .08); --girdi-kenar: rgba(60, 60, 67, .29);
  --cubuk-zemin: rgba(255, 255, 255, .97); }
:root[data-gorunum="cam"][data-tema="koyu"] { --girdi: rgba(118, 118, 128, .2); --girdi-kenar: rgba(235, 235, 245, .26);
  --cubuk-zemin: rgba(28, 30, 38, .98); }
:root[data-gorunum="cam"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):hover:not(:focus) {
  border-color: color-mix(in srgb, var(--girdi-kenar) 60%, var(--metin) 25%); }
:root[data-gorunum="cam"] .alanlar fieldset { margin: 0; padding: 14px 16px 16px; gap: 10px; min-width: 0; }
:root[data-gorunum="cam"] .alanlar fieldset > legend { font-size: 14px; letter-spacing: -.01em; }
:root[data-gorunum="cam"] .liste-satir { border-radius: 14px; padding: 12px 14px 14px; border-color: var(--cizgi); }
:root[data-gorunum="cam"] .hesapla-cubugu { background: var(--cubuk-zemin); border-top: 1px solid var(--cizgi);
  margin-top: 8px; padding: 14px 16px; }
:root[data-gorunum="cam"] .hesapla-cubugu .ipucu { color: var(--soluk); }
:root[data-gorunum="cam"] .alanlar :is(input:not([type="checkbox"]):not([type="radio"]), select) { box-sizing: border-box; height: 38px; }
:root[data-gorunum="cam"] .metin-dugme { -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-gorunum="cam"] .alanlar > label.onay { flex-wrap: wrap; gap: 4px 8px; }
:root[data-gorunum="cam"] .alanlar > label.onay > .ipucu { flex-basis: 100%; padding-left: 46px; }