/* Font yerelden yüklenir: çevrimdışı çalışmak ve mobil paketlemede dış istek
   bırakmamak için Google Fonts'a bağlanılmaz. Değişken font olduğundan tek dosya
   400-800 ağırlık aralığının tamamını karşılar. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../vendor/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../vendor/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Webnane tasarım sistemi
   Stil yönü: Minimalism & Swiss — yüksek kontrast, ızgara, sakin yüzeyler.
   Mobil önce yazılır; büyük ekranlar min-width sorgularıyla eklenir.
   ========================================================================== */

/* --- 1. Token'lar ---------------------------------------------------------- */
:root {
  /* Mürekkep ve yüzeyler */
  --ink:        #0a1512;
  --ink-2:      #2c3a34;
  --muted:      #5a6b63;
  --muted-2:    #7c8a83;
  --line:       #dde5e0;
  --line-2:     #c4d0c9;
  --surface:    #ffffff;
  --surface-2:  #f4f7f4;
  --surface-3:  #eaf0ec;

  /* Marka — "nane" yeşili */
  --brand:      #14563c;
  --brand-dark: #0f4230;
  --brand-soft: #e6f2ea;
  --brand-ink:  #0b3325;
  --accent:     #b9ff6a;   /* yalnızca koyu zeminde */

  /* Durum renkleri (metin / zemin / çizgi) */
  --ok:      #1a6534;  --ok-bg:      #e7f6e9;  --ok-line:      #c2e3c8;
  --warn:    #7d5100;  --warn-bg:    #fff6e3;  --warn-line:    #f0dcaf;
  --danger:  #a32717;  --danger-bg:  #fef0ed;  --danger-line:  #f5cfc7;
  --info:    #1c4f6e;  --info-bg:    #eaf3f9;  --info-line:    #c5ddec;

  /* Boşluk ölçeği */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px;

  /* Yuvarlaklık */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  /* Gölge — Swiss: az ve keskin */
  --sh-1: 0 1px 2px rgba(10, 21, 18, .06);
  --sh-2: 0 2px 10px rgba(10, 21, 18, .07);
  --sh-3: 0 12px 32px rgba(10, 21, 18, .10);
  --sh-pop: 0 18px 48px rgba(10, 21, 18, .18);

  /* Tipografi */
  --font: 'Plus Jakarta Sans', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --t-xs: 12px; --t-sm: 13px; --t-base: 15px; --t-md: 16px;
  --t-lg: 18px; --t-xl: 22px; --t-2xl: 27px; --t-3xl: 33px;

  /* Hareket — düşük; azaltılmış hareket tercih edilirse kapanır */
  --dur: 200ms;
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* Cihaz güvenli alanları (iPhone çentiği / alt sistem çubuğu) */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  /* Uygulama kabuğu ölçüleri */
  --appbar-h: 56px;
  --tabbar-h: 60px;
  --wrap: 1140px;
}

@media (min-width: 768px) { :root { --appbar-h: 68px; --t-3xl: 40px; --t-2xl: 30px; } }

/* --- 2. Sıfırlama ve temel ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Mobilde kazara "aşağı çekip yenile" davranışını kapatır */
  overscroll-behavior-y: contain;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.18; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: var(--t-3xl); letter-spacing: -.035em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
p  { margin: 0; }
img, svg, canvas { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Okunabilirlik: uzun metin satırı 65-75 karakteri geçmesin */
.prose { max-width: 68ch; }

/* Odak — WCAG 2.2: en az 2px çevre, 3:1 kontrast */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.on-dark :focus-visible, .appbar-dark :focus-visible { outline-color: var(--accent); }

::selection { background: var(--brand-soft); color: var(--brand-ink); }

/* Görsel olarak gizli ama okunabilir/odaklanabilir kalan öge.
   !important gerekli: bu bir yardımcı sınıf ve bileşen kurallarını yenmelidir.
   Örneğin .field input { width: 100% } seçicisi daha belirgin olduğu için
   .field içindeki gizli dosya girdisini 375px genişliğe zorluyor ve sayfada
   yatay taşma yaratıyordu. */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  border: 0 !important; overflow: hidden !important;
  clip-path: inset(50%) !important; white-space: nowrap !important;
}
.hidden, [hidden] { display: none !important; }

/* Atlama bağlantısı — klavye kullanıcısı için ilk durak */
.skip-link {
  position: fixed; top: -100px; left: var(--s3); z-index: 200;
  background: var(--ink); color: #fff; padding: var(--s3) var(--s4);
  border-radius: var(--r-md); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: calc(var(--sat) + var(--s3)); }

/* --- 3. Yerleşim ----------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: max(var(--s4), var(--sal)) max(var(--s4), var(--sar));
}
@media (min-width: 768px) { .wrap { padding-inline: var(--s6); } }

.stack > * + * { margin-top: var(--s4); }
.stack-sm > * + * { margin-top: var(--s2); }
.stack-lg > * + * { margin-top: var(--s6); }

.row { display: flex; align-items: center; gap: var(--s3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.row-wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

/* --- 4. Uygulama kabuğu: üst bar ------------------------------------------- */
.appbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  padding-top: var(--sat);
}
.appbar-inner {
  height: var(--appbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px;
  font-size: 21px; font-weight: 800; letter-spacing: -.045em;
  color: var(--ink); text-decoration: none;
}
/* Yalnızca logotipteki "web" hecesi; .brand-mark de bir span olduğu için
   seçici b > span ile daraltılır, aksi hâlde ikon marka rengine boyanıp kaybolur. */
.brand b span { color: var(--brand); }
.brand-mark {
  width: 28px; height: 28px; border-radius: 9px; flex: none;
  background: var(--brand); color: var(--accent);
  display: grid; place-items: center;
}

/* Masaüstü üst menü — mobilde gizli, yerini alt sekme çubuğu alır */
.appnav { display: none; }
@media (min-width: 768px) {
  .appnav { display: flex; align-items: center; gap: var(--s1); }
  .appnav a {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 0 var(--s3); border-radius: var(--r-md);
    font-size: var(--t-base); font-weight: 600; color: var(--muted); text-decoration: none;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .appnav a:hover { background: var(--surface-3); color: var(--ink); }
  .appnav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-ink); }
}

/* Mobilde gezinme alt sekme çubuğunda; üstteki eylem düğmesi gereksiz yer kaplar */
.appbar-cta { display: none; }
@media (min-width: 768px) { .appbar-cta { display: inline-flex; } }

.back-link {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding-inline: var(--s2);
  color: var(--muted); text-decoration: none; font-size: var(--t-base); font-weight: 600;
}
.back-link:hover { color: var(--ink); }
@media (min-width: 768px) { .back-link { display: none; } }

/* --- 5. Uygulama kabuğu: alt sekme çubuğu (yalnızca mobil) ----------------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: var(--sab);
  padding-inline: var(--sal) var(--sar);
}
.tabbar a {
  min-height: var(--tabbar-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: var(--s2) var(--s1);
  color: var(--muted); text-decoration: none;
  font-size: 11px; font-weight: 600; letter-spacing: -.01em;
  transition: color var(--dur) var(--ease);
}
.tabbar a svg { width: 22px; height: 22px; }
.tabbar a[aria-current="page"] { color: var(--brand); }
.tabbar a[aria-current="page"] .tabbar-dot { opacity: 1; }
.tabbar-dot {
  width: 16px; height: 3px; border-radius: var(--r-full);
  background: var(--brand); opacity: 0; transition: opacity var(--dur) var(--ease);
}
@media (min-width: 768px) { .tabbar { display: none; } }

/* Sayfa gövdesi alt sekme çubuğunun altında kalmasın */
.page { padding-block: var(--s5) calc(var(--tabbar-h) + var(--sab) + var(--s8)); }
@media (min-width: 768px) { .page { padding-block: var(--s8) var(--s16); } }

/* Ekran klavyesi açıkken sekme çubuğu formu kapatmasın (platform.js işaretler) */
body.kb-open .tabbar { display: none; }
body.kb-open .page { padding-bottom: var(--s8); }

/* --- 6. Butonlar ----------------------------------------------------------- */
.btn, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s5);
  border: 1px solid transparent; border-radius: var(--r-md);
  background: var(--brand); color: #fff;
  font-size: var(--t-base); font-weight: 650; line-height: 1;
  text-decoration: none; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover, .button:hover { background: var(--brand-dark); }
.btn:active, .button:active { transform: translateY(1px); }
.btn svg, .button svg { width: 18px; height: 18px; flex: none; }

.btn-secondary, .button-light {
  background: var(--surface); color: var(--ink); border-color: var(--line-2);
}
.btn-secondary:hover, .button-light:hover { background: var(--surface-3); border-color: var(--muted-2); }

.btn-ghost { background: transparent; color: var(--ink); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-3); }

.btn-danger, .button-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.btn-danger:hover, .button-danger:hover { background: #fbe1db; }

.btn-accent { background: var(--accent); color: var(--brand-ink); }
.btn-accent:hover { background: #a9f254; }

/* Küçük boy da 44px dokunma hedefinin altına inmez */
.btn-sm, .button-small { min-height: 44px; padding-inline: var(--s3); font-size: var(--t-sm); }
.btn-lg { min-height: 54px; padding-inline: var(--s6); font-size: var(--t-lg); }
.btn-block { width: 100%; }
.btn-icon { min-width: 44px; min-height: 44px; padding: 0; }

.btn:disabled, .button:disabled,
.btn[aria-disabled="true"], .button[aria-disabled="true"] {
  background: var(--surface-3); color: #5c6863;
  border-color: var(--line-2); cursor: not-allowed; transform: none;
}
.btn:disabled:hover, .button:disabled:hover,
.btn[aria-disabled="true"]:hover, .button[aria-disabled="true"]:hover {
  background: var(--surface-3); color: #5c6863;
}

/* Yükleniyor: genişlik sabit kalır, düğme metni yerinde durur */
.btn[data-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.btn[data-busy="true"]::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite;
}
.btn-secondary[data-busy="true"]::after { border-color: rgba(10, 21, 18, .25); border-top-color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- 7. Form alanları ------------------------------------------------------ */
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
@media (min-width: 620px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field.full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.field label, .label {
  font-size: var(--t-sm); font-weight: 650; color: var(--ink-2); letter-spacing: -.005em;
}
.field input, .field select, .field textarea, .input, .select, .textarea {
  width: 100%; min-height: 48px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  font-size: var(--t-md); /* 16px: iOS'ta odaklanınca sayfayı yakınlaştırmaz */
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea, .textarea { min-height: 96px; padding-top: var(--s3); resize: vertical; line-height: 1.5; }
.field select, .select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b63' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s3) center; background-size: 18px;
  padding-right: var(--s10);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted-2); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: 3px solid var(--brand); outline-offset: 0; border-color: var(--brand);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }

.is-invalid { border-color: var(--danger) !important; background: var(--danger-bg) !important; }
.help { font-size: var(--t-sm); color: var(--muted); }

.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: 48px; padding: var(--s2) 0;
}

/* --- 8. Kart ve panel ------------------------------------------------------ */
.card, .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  min-width: 0;
}
@media (min-width: 768px) { .card, .panel { padding: var(--s6); border-radius: var(--r-xl); } }
.card-flat { box-shadow: none; }
.card-raised { box-shadow: var(--sh-2); }
/* İçindeki katlanabilir bölümler zaten kart görünümünde: panel kendi çerçevesini
   bırakır, böylece mobilde iç içe iki kutu ve gereksiz yatay boşluk oluşmaz. */
.panel-flush { background: none; border: 0; padding: 0; }

.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.card-head h2, .panel > h2 { font-size: var(--t-lg); }
.card-head p { font-size: var(--t-base); color: var(--muted); margin-top: var(--s1); }

.section-label {
  font-size: var(--t-xs); font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand);
}

/* İki sütunlu çalışma alanı: mobilde tek sütun */
.workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: start; }
@media (min-width: 1000px) {
  .workspace { grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: var(--s5); }
  .workspace-sticky { position: sticky; top: calc(var(--appbar-h) + var(--sat) + var(--s5)); }
}

/* --- 9. Durum rozetleri ---------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 3px var(--s2); border: 1px solid transparent; border-radius: var(--r-full);
  font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase;
}
.badge-ready { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.badge-beta  { background: var(--surface-3); color: var(--ink-2); border-color: var(--line-2); }
.badge-dev   { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.badge-new   { background: var(--brand-soft); color: var(--brand-ink); border-color: #c9e3d3; }
.badge-local { background: var(--info-bg); color: var(--info); border-color: var(--info-line); }
/* Koyu zemin karşılıkları */
.on-dark .badge-ready { background: #14351f; color: #b6e6c0; border-color: #2a5136; }
.on-dark .badge-beta  { background: #26302c; color: #ccd8d1; border-color: #3f4c46; }
.on-dark .badge-dev   { background: #4a3510; color: #ffdda1; border-color: #6d5220; }
.on-dark .badge-new   { background: #163d2b; color: var(--accent); border-color: #27543d; }
.on-dark .badge-local { background: #14303f; color: #b6d9ec; border-color: #24485c; }

/* --- 10. Bildirim / uyarı -------------------------------------------------- */
.alert, .status, .notice, .input-warning, .tool-note {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s3) var(--s4); font-size: var(--t-base);
  background: var(--surface-3); color: var(--ink-2);
}
.alert b, .status b, .notice b, .input-warning b, .tool-note b { display: block; margin-bottom: var(--s1); font-weight: 700; }
.alert ul, .input-warning ul, .tool-note ul { margin: var(--s1) 0 0; padding-left: var(--s5); }
.alert li, .input-warning li, .tool-note li { margin: var(--s1) 0; }

.status { display: none; margin-top: var(--s3); }
.status.show { display: block; }
.alert-ok, .status.success, .tool-note-ready { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.alert-warn, .status.warn, .notice, .input-warning.warn, .tool-note-dev { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.alert-error, .status.error, .input-warning { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.alert-info, .tool-note-beta { background: var(--info-bg); color: var(--info); border-color: var(--info-line); }

.notice { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s4); }
.notice button {
  flex: none; min-width: 36px; min-height: 36px; margin: -6px -6px -6px 0;
  border: 0; border-radius: var(--r-sm); background: transparent; color: inherit;
  font-size: 20px; line-height: 1; cursor: pointer; touch-action: manipulation;
}
.notice button:hover { background: rgba(0, 0, 0, .06); }

.hint {
  padding: var(--s3) var(--s4); border-left: 3px solid var(--brand);
  background: var(--brand-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-sm); color: var(--brand-ink);
}
.hint b { font-weight: 700; }

/* Cümle içindeki bağlantılar. WCAG 2.5.8'in satır içi bağlantı istisnası
   kapsamındadırlar (44px kuralı uygulanmaz), yine de dikey dolgu ile dokunma
   alanı genişletilir; negatif dış boşluk satır yüksekliğini bozmaz. */
.hint a, .sitefoot a, .alert a, .prose a, .help a {
  color: var(--brand); font-weight: 650;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  padding-block: 9px; margin-block: -9px;
}
.hint a:hover, .sitefoot a:hover, .alert a:hover { color: var(--brand-dark); }

/* Gizlilik rozeti — yalnızca gerçekten cihazda çalışan araçlarda kullanılır */
.privacy-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 6px var(--s3); border-radius: var(--r-full);
  background: var(--info-bg); color: var(--info); border: 1px solid var(--info-line);
  font-size: var(--t-xs); font-weight: 650; white-space: nowrap;
}
.privacy-pill svg { width: 14px; height: 14px; }

/* --- 11. Dosya bırakma alanı ---------------------------------------------- */
.dropzone {
  position: relative; display: block;
  border: 2px dashed var(--line-2); border-radius: var(--r-lg);
  background: var(--surface-2);
  padding: var(--s8) var(--s4);
  text-align: center; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dropzone:hover { border-color: var(--brand); background: var(--brand-soft); }
.dropzone.drag { border-color: var(--brand); background: var(--brand-soft); border-style: solid; }
.dropzone input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.dropzone-icon {
  width: 46px; height: 46px; margin: 0 auto var(--s3);
  display: grid; place-items: center; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); color: var(--brand);
}
.dropzone strong { display: block; font-size: var(--t-md); font-weight: 650; }
.dropzone span { display: block; margin-top: var(--s1); color: var(--muted); font-size: var(--t-sm); }
.dropzone:focus-within { outline: 3px solid var(--brand); outline-offset: 2px; border-color: var(--brand); }

.dropzone.is-locked { cursor: not-allowed; border-style: solid; border-color: var(--line); background: var(--surface-3); }
.dropzone.is-locked:hover { border-color: var(--line); background: var(--surface-3); }
.dropzone.is-locked strong { color: var(--ink-2); }
.dropzone.is-locked span { color: #5c6863; }
.dropzone.is-locked .dropzone-icon { color: var(--muted-2); }

.selected-file {
  display: none; align-items: center; gap: var(--s3);
  margin-top: var(--s3); padding: var(--s3) var(--s4);
  background: var(--brand-soft); border: 1px solid #c9e3d3; border-radius: var(--r-md);
  font-size: var(--t-sm); color: var(--brand-ink); word-break: break-word;
}
.selected-file.show { display: flex; }

/* --- 12. Segment kontrolü (dönüşüm sekmeleri) ----------------------------- */
.segmented, .converter-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2);
  margin-bottom: var(--s4);
}
.segment, .converter-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 60px; padding: var(--s2);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  font-size: var(--t-sm); font-weight: 650; line-height: 1.25; text-align: center;
  cursor: pointer; touch-action: manipulation;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segment:hover, .converter-tab:hover { border-color: var(--brand); background: var(--brand-soft); }
.segment.active, .converter-tab.active {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.tab-name { display: block; }
.tab-badge {
  display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 2px 7px; border: 1px solid transparent; border-radius: var(--r-full);
  font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.tab-badge-beta { background: var(--surface-3); color: var(--ink-2); border-color: var(--line-2); }
.tab-badge-dev  { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.converter-tab.active .tab-badge-beta { background: #33413b; color: #e7ecea; border-color: #53625b; }
.converter-tab.active .tab-badge-dev  { background: #5a3f12; color: #ffe7b8; border-color: #836427; }

/* --- 13. Adım göstergesi --------------------------------------------------- */
.steps {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin: 0 0 var(--s4); padding: 0; list-style: none;
}
/* Dar ekranda beş rozet yan yana sığmaz ve yatay kaydırma kötü bir çözüm olur:
   yalnızca bulunulan adım yazılır, altında ince bir ilerleme çubuğu gösterilir. */
@media (max-width: 619px) {
  .steps .step { display: none; }
  .steps .step.is-current { display: flex; width: 100%; }
  .steps::after {
    content: ""; width: 100%; height: 4px; border-radius: var(--r-full);
    background: linear-gradient(to right, var(--brand) var(--step-pct, 20%), var(--surface-3) var(--step-pct, 20%));
  }
}
.step {
  display: flex; align-items: center; gap: var(--s2); flex: none;
  padding: var(--s2) var(--s3); border-radius: var(--r-full);
  background: var(--surface-3); color: var(--muted);
  font-size: var(--t-sm); font-weight: 650; white-space: nowrap;
}
.step b {
  display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border-radius: 50%; background: var(--line-2); color: var(--surface);
  font-size: 11px; font-weight: 800;
}
.step.is-done { background: var(--brand-soft); color: var(--brand-ink); }
.step.is-done b { background: var(--brand); color: #fff; }
.step.is-current { background: var(--ink); color: #fff; }
.step.is-current b { background: var(--accent); color: var(--brand-ink); }

/* Katlanabilir bölüm — uzun formu bölmek için */
.fold { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.fold + .fold { margin-top: var(--s3); }
.fold > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 56px; padding: var(--s3) var(--s5);
  font-size: var(--t-md); font-weight: 650; cursor: pointer; list-style: none;
  touch-action: manipulation;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after {
  content: ""; flex: none; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b63' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.fold[open] > summary::after { transform: rotate(180deg); }
.fold[open] > summary { border-bottom: 1px solid var(--line); }
.fold > summary:hover { background: var(--surface-2); }
.fold-body { padding: var(--s5); }
.fold-note { font-size: var(--t-sm); font-weight: 500; color: var(--muted); }

/* --- 14. Tablolar ---------------------------------------------------------- */
.table-scroll {
  position: relative; max-width: 100%; overflow-x: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  border-radius: var(--r-md);
}
.items-table { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.items-table th {
  background: var(--surface-3); text-align: left; padding: var(--s3);
  font-size: var(--t-sm); font-weight: 700; color: var(--ink-2); white-space: nowrap;
}
.items-table td { border-bottom: 1px solid var(--line); padding: var(--s2) var(--s3); vertical-align: middle; }
.items-table input {
  width: 100%; min-width: 90px; min-height: 44px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); font-size: var(--t-md);
}
.items-table input:focus-visible { outline: 3px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
.row-remove {
  min-width: 44px; min-height: 44px; border: 0; border-radius: var(--r-sm);
  background: var(--danger-bg); color: var(--danger);
  font-size: 18px; line-height: 1; cursor: pointer; touch-action: manipulation;
}
.row-remove:hover { background: #fbe1db; }

/* Teklif kalemleri dar ekranda tabloya sıkıştırılmaz: her kalem tek elle
   doldurulabilen bir karta dönüşür, yatay kaydırma gerekmez.
   Başlıklar ::before ile yazıldığı için tablo işaretlemesi ve JS aynı kalır. */
@media (max-width: 619px) {
  .items-cards { overflow: visible; }
  .items-cards table, .items-cards tbody, .items-cards td { display: block; width: 100%; }
  .items-cards thead { display: none; }
  /* Sayısal üç alan (miktar · birim fiyat · iskonto) yan yana durur; kart
     gereksiz uzamaz ve kalemler telefonda tek ekranda görülebilir. */
  .items-cards tr {
    position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--s3); margin-bottom: var(--s3);
    padding: var(--s4) var(--s4) var(--s4);
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2);
  }
  .items-cards td { border: 0; padding: 0; min-width: 0; }
  .items-cards td:nth-child(1), .items-cards td:nth-child(2) { grid-column: 1 / -1; }
  .items-cards td::before {
    display: block; margin-bottom: var(--s1);
    font-size: var(--t-sm); font-weight: 650; color: var(--ink-2);
  }
  .items-cards td:nth-child(1)::before { content: "Ürün / hizmet"; }
  .items-cards td:nth-child(2)::before { content: "Açıklama"; }
  .items-cards td:nth-child(3)::before { content: "Miktar"; }
  .items-cards td:nth-child(4)::before { content: "Birim fiyat"; }
  .items-cards td:nth-child(5)::before { content: "İsk. %"; }
  .items-cards td:nth-child(6) { position: absolute; top: var(--s2); right: var(--s2); width: auto; margin: 0; }
  .items-cards td:nth-child(6)::before { content: none; }
  .items-cards input { min-width: 0; }
  /* Silme düğmesi ilk alanın üstüne binmesin diye yer bırakılır */
  .items-cards td:nth-child(1) { padding-right: 52px; }
}

/* --- 15. Belge önizlemesi (teklif / katalog / dönüşüm) -------------------- */
.preview { min-width: 0; }
.document, .catalog-sheet {
  background: #fff; color: #16211d;
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s5);
  box-shadow: var(--sh-1);
  min-width: 0;
}
@media (min-width: 768px) { .document, .catalog-sheet { padding: var(--s10); } }
.document-head {
  display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between;
  border-bottom: 3px solid var(--brand); padding-bottom: var(--s4); margin-bottom: var(--s6);
}
.document-head h2 { font-size: var(--t-xl); }
.document-head p { margin-top: var(--s1); color: var(--muted); font-size: var(--t-sm); }
.doc-meta { text-align: right; font-size: var(--t-sm); }
.totals { width: min(300px, 100%); margin: var(--s6) 0 0 auto; }
.totals div { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; font-size: var(--t-base); }
.totals .grand { font-weight: 800; font-size: var(--t-lg); border-top: 2px solid var(--ink); margin-top: var(--s2); padding-top: var(--s3); }

.empty-preview {
  min-height: 300px; display: grid; place-content: center; justify-items: center;
  text-align: center; color: var(--muted); padding: var(--s6);
  border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: var(--surface);
}
.empty-preview b { font-size: 34px; color: var(--line-2); display: block; }
.empty-preview svg { color: var(--muted-2); margin-bottom: var(--s3); }
.empty-preview p { margin-top: var(--s2); font-size: var(--t-base); max-width: 40ch; }
.empty-preview.is-locked { background: var(--surface-2); }

.action-row { display: grid; gap: var(--s2); margin-top: var(--s4); }
@media (min-width: 480px) { .action-row { grid-auto-flow: column; grid-auto-columns: 1fr; } }

/* Katalog */
.catalog-cover {
  background: var(--ink); color: #fff; border-radius: var(--r-md);
  padding: var(--s6); margin-bottom: var(--s5);
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 170px;
}
.catalog-cover small { color: var(--accent); font-weight: 750; font-size: var(--t-sm); letter-spacing: .06em; }
.catalog-cover h2 { font-size: var(--t-2xl); margin: var(--s2) 0 var(--s1); }
.catalog-cover p { color: #adbdb5; font-size: var(--t-sm); }
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
@media (min-width: 700px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
.product-card { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.product-image { aspect-ratio: 4 / 3; background: var(--surface-3); display: grid; place-content: center; color: var(--muted-2); font-size: var(--t-xs); }
.product-image img { width: 100%; height: 100%; object-fit: cover; }
.product-body { padding: var(--s3); }
.product-body small { color: var(--brand); font-weight: 750; font-size: var(--t-xs); }
.product-body h3 { margin: var(--s1) 0; font-size: var(--t-base); }
.product-body p { font-size: var(--t-sm); color: var(--muted); }
.product-price { margin-top: var(--s2); font-size: var(--t-md); font-weight: 800; }

/* --- 15b. Belge çalışma alanı (teklif / katalog) --------------------------
   Telefonda form ve belge aynı ekranda yarışmaz: üstteki anahtar ile
   "Düzenle" ve "Önizleme" arasında geçilir. 1000px üstünde ikisi yan yana
   durduğundan anahtar gizlenir ve iki bölme de her zaman görünür. */
.view-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1);
  margin-bottom: var(--s4); padding: var(--s1);
  background: var(--surface-3); border-radius: var(--r-md);
}
.view-switch button {
  min-height: 44px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--muted);
  font-size: var(--t-base); font-weight: 650; cursor: pointer;
  touch-action: manipulation;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.view-switch button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
@media (min-width: 1000px) { .view-switch { display: none; } }
@media (max-width: 999px) { .is-hidden-mobile { display: none !important; } }

/* Belge önizlemesi: gerçek PDF'in pdf.js ile çizilmiş hâli.
   Tuval kapsayıcıya göre ölçeklenir; A4 sayfa telefonda küçültülmüş görünür
   ve hiçbir genişlikte yatay taşma oluşmaz. */
.doc-preview { min-width: 0; }
.doc-paper {
  position: relative; min-width: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--sh-2); overflow: hidden;
  /* Belge gelmeden önce de A4 oranında yer tutar: içerik gelince sayfa
     zıplamaz (CLS). */
  aspect-ratio: 210 / 297;
}
.doc-preview.has-document .doc-paper { aspect-ratio: auto; }
.doc-paper canvas { display: block; width: 100%; height: auto; }

.doc-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3);
  padding: var(--s6); text-align: center;
  background: rgba(255, 255, 255, .92); color: var(--muted);
  font-size: var(--t-base);
}
.doc-overlay-empty { background: var(--surface-2); }
.doc-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--line-2); border-top-color: var(--brand);
  animation: spin .8s linear infinite;
}

.doc-pager {
  display: flex; align-items: center; justify-content: center; gap: var(--s4);
  margin-top: var(--s3);
}
.doc-pager-label { font-size: var(--t-sm); font-weight: 650; color: var(--muted); min-width: 68px; text-align: center; }

/* Eylem çubuğu — telefonda ekranın altına sabitlenir (tek elle erişim),
   masaüstünde akışta kalır. */
.doc-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s2); margin-top: var(--s5); }
@media (max-width: 999px) {
  .doc-actions {
    position: sticky; z-index: 40;
    bottom: calc(var(--tabbar-h) + var(--sab) + var(--s2));
    margin-inline: calc(var(--s2) * -1);
    padding: var(--s2);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(1.4) blur(10px);
    border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
  }
  body.kb-open .doc-actions { position: static; box-shadow: none; }
}
.doc-actions .btn { min-height: 50px; padding-inline: var(--s3); }
@media (max-width: 400px) { .doc-actions .btn { font-size: var(--t-sm); gap: 5px; } }

/* Logo seçici */
.logo-picker { display: flex; align-items: flex-start; gap: var(--s4); }
.logo-slot {
  width: 96px; height: 60px; flex: none;
  display: grid; place-items: center; padding: var(--s2);
  border: 1px dashed var(--line-2); border-radius: var(--r-md); background: var(--surface-2);
}
.logo-slot img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-empty { font-size: var(--t-xs); color: var(--muted-2); }
.logo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-width: 0; }
.logo-actions .help { flex-basis: 100%; }
/* Dosya girişi görsel olarak gizli ama odaklanabilir: etiket düğme gibi
   davranırken klavye erişimi korunur. */
.logo-actions label:focus-within { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Şablon seçici */
.template-picker { margin: 0; padding: 0; border: 0; min-width: 0; }
.template-picker legend { padding: 0; margin-bottom: var(--s2); }
.template-grid { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
@media (min-width: 520px) { .template-grid { grid-template-columns: 1fr 1fr; } }
.template-card {
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto;
  gap: 2px var(--s3); align-items: center;
  padding: var(--s3); text-align: left;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.template-card:hover { border-color: var(--brand); background: var(--brand-soft); }
.template-card[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand) inset; }
.template-card b { font-size: var(--t-base); }
.template-note { grid-column: 2; font-size: var(--t-xs); color: var(--muted); }
/* Şablonun sayfa düzenini gösteren küçük şema — metin yerine biçimin kendisi */
.template-shape {
  grid-row: 1 / 3; width: 44px; height: 56px;
  border: 1px solid var(--line-2); border-radius: 3px; background: var(--surface);
  background-repeat: no-repeat;
}
.template-shape-clean {
  background-image:
    linear-gradient(var(--line-2), var(--line-2)), linear-gradient(var(--line-2), var(--line-2)),
    linear-gradient(var(--line-2), var(--line-2));
  background-size: 34px 8px, 34px 8px, 34px 8px;
  background-position: 5px 8px, 5px 24px, 5px 40px;
}
.template-shape-product {
  background-image:
    linear-gradient(var(--line-2), var(--line-2)), linear-gradient(var(--line-2), var(--line-2)),
    linear-gradient(var(--line-2), var(--line-2)), linear-gradient(var(--line-2), var(--line-2));
  background-size: 15px 18px, 15px 18px, 15px 18px, 15px 18px;
  background-position: 5px 8px, 24px 8px, 5px 30px, 24px 30px;
}
/* Modern Vitrin: solda tam boy görsel sütunu, sağda iki sıra metin. */
.template-shape-showcase {
  background-image:
    linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--line-2), var(--line-2)),
    linear-gradient(var(--line-2), var(--line-2)), linear-gradient(var(--line-2), var(--line-2));
  background-size: 18px 40px, 14px 6px, 14px 6px, 14px 14px;
  background-position: 5px 8px, 26px 8px, 26px 18px, 26px 30px;
}

/* Teklif temaları — teklif belgesinin üst bloğunu ve tablo yoğunluğunu
   şematik olarak gösterir. Aynı .template-card kabuğunu kullanır. */
.template-shape-quote-clean {
  background-image:
    linear-gradient(var(--line-2), var(--line-2)), linear-gradient(var(--line-2), var(--line-2)),
    linear-gradient(var(--line-2), var(--line-2)), linear-gradient(var(--line-2), var(--line-2));
  background-size: 20px 5px, 34px 2px, 34px 7px, 34px 7px;
  background-position: 5px 7px, 5px 17px, 5px 24px, 5px 36px;
}
.template-shape-quote-accent {
  background-image:
    linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--line-2), var(--line-2)),
    linear-gradient(var(--line-2), var(--line-2)), linear-gradient(var(--brand), var(--brand));
  background-size: 44px 16px, 34px 4px, 34px 4px, 22px 8px;
  background-position: 0 0, 5px 24px, 5px 32px, 17px 42px;
}
.template-shape-quote-technical {
  background-image:
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--line-2), var(--line-2)),
    linear-gradient(var(--line-2), var(--line-2)), linear-gradient(var(--line-2), var(--line-2)),
    linear-gradient(var(--line-2), var(--line-2));
  background-size: 34px 5px, 34px 3px, 34px 3px, 34px 3px, 34px 3px;
  background-position: 5px 6px, 5px 16px, 5px 23px, 5px 30px, 5px 37px;
}

.color-input { padding: 4px; min-height: 48px; cursor: pointer; }
.dropzone-sm { padding: var(--s5) var(--s4); }

/* --- 15c. Yapay zekâ asistanı --------------------------------------------
   AI özellikleri sihirli değnek simgesiyle işaretlenir ve ana formu
   kalabalıklaştırmaz: katlanabilir bölüm içinde, varsayılan kapalı durur.
   Kapalıyken (AI etkin değilken) bölüm görünür kalır ama soluklaşır —
   kullanıcı özelliğin varlığını bilir, boşuna beklemez. */
.ai-fold { border-color: #c9dbcf; background: linear-gradient(180deg, #f7fbf8, var(--surface) 60%); }
.ai-fold.is-off { opacity: .72; }
.ai-summary { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; }
.ai-icon { color: var(--brand); flex: none; }
.ai-fold.is-off .ai-icon { color: var(--muted-2); }

.ai-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ai-actions .btn { flex: 1 1 auto; min-width: 148px; }
.ai-note-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: start; }
.ai-note-input textarea { min-width: 0; }
.ai-mic { width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 50%; }
.ai-mic.is-listening { color: #fff; background: #c93838; border-color: #c93838; animation: ai-mic-pulse 1.2s ease-in-out infinite; }
/* Görünmez insan doğrulaması: normalde ekran dışındadır. Cloudflare bulmaca
   göstermeye karar verdiğinde .is-interactive eklenir ve kutu ekranın
   ortasına alınır — aksi hâlde kullanıcı göremediği bir bulmacayı bekler. */
.ai-human-check { position: fixed; width: 1px; height: 1px; overflow: hidden; left: -10000px; bottom: 0; }
.ai-human-check.is-interactive {
  inset: 0; left: 0; width: auto; height: auto; overflow: visible;
  z-index: 120; display: grid; place-items: center;
  padding: var(--s4) calc(var(--s4) + var(--sar)) calc(var(--s4) + var(--sab)) calc(var(--s4) + var(--sal));
  background: rgba(10, 21, 18, .55);
}
@keyframes ai-mic-pulse { 50% { box-shadow: 0 0 0 7px rgba(201, 56, 56, .16); } }
/* Dinleme durumu yazıyla da bildirilir: nabız animasyonu "azaltılmış hareket"
   tercihinde kapanır, renk tek başına anlam taşıyamaz. */
.ai-mic-state { display: flex; align-items: center; gap: var(--s2); color: #a32717; font-weight: 650; }
.ai-mic-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* Ürün seçim listesi — toplu işlemler önce seçim ister */
.ai-select-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.ai-picker { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.ai-picker-tools { display: flex; gap: var(--s2); padding: var(--s2); border-bottom: 1px solid var(--line); }
.ai-picker-list { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.ai-picker-row {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 48px; padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--surface-3); cursor: pointer;
}
.ai-picker-row:last-child { border-bottom: 0; }
.ai-picker-row:hover { background: var(--surface-2); }
.ai-picker-row input { width: 20px; height: 20px; flex: none; accent-color: var(--brand); }
.ai-picker-text { display: flex; flex-direction: column; min-width: 0; }
.ai-picker-text b { font-size: var(--t-base); font-weight: 650; overflow-wrap: anywhere; }
.ai-picker-text small { color: var(--muted); font-size: var(--t-xs); }

/* AI alt sayfası */
.ai-sheet { max-width: 760px; }
.ai-consent-title { display: block; margin-top: var(--s4); }
.ai-consent-list { margin: var(--s2) 0 0; padding-left: var(--s5); color: var(--ink-2); }
.ai-consent-list li { margin: var(--s1) 0; }
.ai-cloud-note { margin-top: var(--s4); display: grid; gap: var(--s1); }

.ai-busy { display: flex; align-items: center; gap: var(--s3); padding: var(--s6) 0; justify-content: center; }
.ai-busy-label { font-size: var(--t-base); color: var(--ink-2); }

/* "Şunlar gönderilecek" listesi */
.ai-payload { margin-top: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.ai-payload-row { display: grid; grid-template-columns: 1fr; gap: 2px; padding: var(--s3); border-bottom: 1px solid var(--line); }
.ai-payload-row:last-child { border-bottom: 0; }
@media (min-width: 620px) { .ai-payload-row { grid-template-columns: 160px 1fr; gap: var(--s3); } }
.ai-payload-label { font-size: var(--t-sm); font-weight: 650; color: var(--muted); }
.ai-payload-value { font-size: var(--t-base); overflow-wrap: anywhere; }

/* Öneri karşılaştırma kartları */
.ai-review { display: grid; gap: var(--s3); margin-top: var(--s4); }
.ai-card { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--s4); background: var(--surface); }
.ai-card.is-accepted { border-color: var(--ok); background: var(--ok-bg); }
.ai-card.is-rejected { opacity: .6; }
.ai-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.ai-card-head b { font-size: var(--t-base); overflow-wrap: anywhere; }
.ai-card-state { flex: none; font-size: var(--t-xs); font-weight: 700; color: var(--muted); }
.ai-card.is-accepted .ai-card-state { color: var(--ok); }
.ai-field + .ai-field { margin-top: var(--s3); }
.ai-field-label { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s1); }

/* Telefonda alt alta, geniş ekranda yan yana. Uzun metin kutudan taşmaz. */
.ai-pair { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
@media (min-width: 620px) { .ai-pair { grid-template-columns: 1fr 1fr; gap: var(--s3); } }
.ai-side { min-width: 0; padding: var(--s3); border-radius: var(--r-sm); background: var(--surface-2); }
.ai-side-after { background: var(--brand-soft); }
.ai-side-label { display: block; font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s1); }
.ai-text { font-size: var(--t-base); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
/* Değişen kısımlar: renk TEK başına anlam taşımasın diye altı çizili /
   üstü çizili biçim de uygulanır. */
.ai-add { background: #d8f2df; color: #0f4d24; border-radius: 3px; text-decoration: underline; text-underline-offset: 2px; }
.ai-del { background: #fbe3de; color: #8c2a19; border-radius: 3px; text-decoration: line-through; }
.ai-card-actions { display: flex; gap: var(--s2); margin-top: var(--s4); }
.ai-card-actions .btn { flex: 1; }
/* Uzun listede kaç öneri işaretlendiği "Uygula" düğmesinin hemen üstünde
   durur; telefonda kullanıcı saymak için başa dönmek zorunda kalmaz. */
.ai-review-summary { margin: 0 0 var(--s3); font-size: var(--t-sm); font-weight: 650; color: var(--muted); }

.ai-findings { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.ai-findings li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: var(--s3); border-radius: var(--r-sm);
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn);
  font-size: var(--t-base);
}
.ai-findings small { flex: none; font-size: var(--t-xs); opacity: .8; }

/* Geri al şeridi — alt sekme çubuğunun üstünde durur */
.ai-undo {
  position: fixed; z-index: 95; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--sab) + var(--s4));
  display: flex; align-items: center; gap: var(--s3);
  width: min(560px, calc(100% - var(--s8)));
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: var(--ink); color: #fff; box-shadow: var(--sh-3);
  font-size: var(--t-base);
  animation: toast-in 200ms var(--ease);
}
@media (min-width: 768px) { .ai-undo { bottom: var(--s6); } }

/* --- 16. PDF sayfa yönetimi ----------------------------------------------- */
.thumb-grid {
  /* 360px'te iki kart yan yana sığar; araç düğmeleri iki sütunda 44px'i korur */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--s3);
}
@media (min-width: 768px) { .thumb-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); } }
.thumb {
  position: relative; border: 2px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.thumb.is-selected { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.thumb.is-removed { opacity: .42; }
.thumb.is-removed .thumb-canvas { filter: grayscale(1); }
.thumb-pick {
  display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer;
  touch-action: manipulation;
}
.thumb-canvas {
  display: grid; place-items: center; aspect-ratio: 1 / 1.414;
  background: var(--surface-3); overflow: hidden;
}
.thumb-canvas canvas { width: 100%; height: auto; display: block; }
.thumb-no { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: var(--r-full);
  background: rgba(10, 21, 18, .78); color: #fff; font-size: 11px; font-weight: 700; }
.thumb-rot { position: absolute; top: 6px; right: 6px; padding: 2px 7px; border-radius: var(--r-full);
  background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; }
/* Dört düğme tek sıraya sığdırılırsa küçük resim genişliğinde ~33px kalır ve
   44px dokunma hedefi kuralı bozulur. Bu yüzden iki sütun hâlinde dizilir. */
.thumb-tools {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border-top: 1px solid var(--line);
}
.thumb-tools button {
  min-height: 44px; border: 0; background: var(--surface); color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer; touch-action: manipulation;
}
.thumb-tools button:hover { background: var(--brand-soft); color: var(--brand-ink); }
.thumb-tools button:disabled { color: var(--line-2); cursor: not-allowed; background: var(--surface); }
.thumb-tools svg { width: 16px; height: 16px; }

/* --- 17. Alt sayfa (bottom sheet) / modal --------------------------------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10, 21, 18, .45);
  display: flex; align-items: flex-end; justify-content: center;
  padding-top: calc(var(--sat) + var(--s6));
}
@media (min-width: 768px) { .sheet-backdrop { align-items: center; padding: var(--s6); } }
.sheet {
  width: 100%; max-width: 560px; max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-pop);
  padding-bottom: var(--sab);
  animation: sheet-in 260ms var(--ease);
}
@media (min-width: 768px) { .sheet { border-radius: var(--r-xl); padding-bottom: 0; } }
@keyframes sheet-in { from { transform: translateY(16px); opacity: 0; } }
.sheet-grip { width: 40px; height: 4px; border-radius: var(--r-full); background: var(--line-2); margin: var(--s2) auto 0; flex: none; }
@media (min-width: 768px) { .sheet-grip { display: none; } }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); flex: none;
}
.sheet-head h2 { font-size: var(--t-lg); }
.sheet-body { padding: var(--s5); overflow-y: auto; overscroll-behavior: contain; }
.sheet-foot { padding: var(--s4) var(--s5); border-top: 1px solid var(--line); flex: none; }

/* --- 18. Bildirim balonu (toast) ------------------------------------------ */
.toast-host {
  position: fixed; z-index: 100; left: 0; right: 0;
  bottom: calc(var(--tabbar-h) + var(--sab) + var(--s3));
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  padding-inline: var(--s4); pointer-events: none;
}
@media (min-width: 768px) { .toast-host { bottom: var(--s6); } }
.toast {
  max-width: 460px; width: 100%;
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: var(--ink); color: #fff; font-size: var(--t-base);
  box-shadow: var(--sh-3); pointer-events: auto;
  animation: toast-in 200ms var(--ease);
}
.toast-error { background: #7b1d10; }
.toast-ok { background: var(--brand); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

/* Çevrimdışı şeridi — alt sekme çubuğunun hemen üstünde durur */
.offline-bar {
  position: fixed; z-index: 70; left: 0; right: 0;
  bottom: calc(var(--tabbar-h) + var(--sab));
  padding: var(--s2) var(--s4) var(--s2);
  padding-left: max(var(--s4), var(--sal)); padding-right: max(var(--s4), var(--sar));
  background: var(--warn-bg); color: var(--warn);
  border-top: 1px solid var(--warn-line);
  font-size: var(--t-sm); font-weight: 600; text-align: center;
}
@media (min-width: 768px) { .offline-bar { bottom: 0; padding-bottom: calc(var(--s2) + var(--sab)); } }

/* --- 19. İskelet (yükleniyor) --------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-3) 25%, #f2f6f3 37%, var(--surface-3) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* --- 20. Ana sayfa --------------------------------------------------------- */
.hero { padding-block: var(--s6) var(--s8); }
@media (min-width: 768px) { .hero { padding-block: var(--s12) var(--s10); } }
/* Satır yüksekliği 1.08'in altına inmez: Türkçe büyük İ/Ğ/Ü işaretleri üst satıra değer. */
.hero h1 { font-size: clamp(32px, 8.5vw, 58px); letter-spacing: -.04em; line-height: 1.08; }
.hero h1 em { color: var(--brand); font-style: normal; }
.hero > p { margin-top: var(--s4); font-size: var(--t-lg); color: var(--muted); max-width: 46ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-xs); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--brand);
}
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #52b455; box-shadow: 0 0 0 4px #dcf1dd; }

.trust-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.trust {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--s2) var(--s3); border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--line);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
}
.trust svg { width: 15px; height: 15px; color: var(--brand); flex: none; }

/* Dört araç: 1 → 2 → 4 sütun. Üç sütunda dördüncü kart tek başına satır açıyordu. */
.tool-grid { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
@media (min-width: 620px) { .tool-grid { grid-template-columns: 1fr 1fr; gap: var(--s4); } }
@media (min-width: 1040px) { .tool-grid { grid-template-columns: repeat(4, 1fr); } }

.tool-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink); text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tool-card:hover { border-color: var(--brand); box-shadow: var(--sh-2); transform: translateY(-2px); }
.tool-card.featured { background: var(--ink); color: #fff; border-color: var(--ink); }
.tool-card.featured:hover { border-color: var(--accent); }
.tool-card.featured p, .tool-card.featured li { color: #adbdb5; }
/* Kapalı araç kartı: bağlantı değildir, tıklanmaz, imleç değişmez.
   Durum yalnızca renkle değil "Yakında" rozetiyle ve açıklamayla bildirilir. */
.tool-card.is-soon { background: var(--surface-2); border-style: dashed; cursor: default; }
.tool-card.is-soon:hover { transform: none; box-shadow: none; border-color: var(--line); }
.tool-card.is-soon h3 { color: var(--ink-2); }
.tool-card.is-soon .tool-icon { background: var(--surface-3); color: var(--muted-2); }

.tool-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.tool-icon {
  width: 44px; height: 44px; flex: none; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}
.featured .tool-icon { background: var(--accent); color: var(--brand-ink); }
.tool-icon svg { width: 22px; height: 22px; }
.tool-card h3 { font-size: var(--t-xl); }
.tool-card > p { font-size: var(--t-base); color: var(--muted); }
.tool-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tool-list li {
  padding: 4px var(--s2); border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-2);
}
.featured .tool-list li { background: #1b2723; border-color: #2f3a36; color: #c3cfc9; }
.card-link {
  margin-top: auto; padding-top: var(--s2);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-base); font-weight: 700; color: var(--brand);
}
.featured .card-link { color: var(--accent); }

.why { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
@media (min-width: 620px) { .why { grid-template-columns: repeat(3, 1fr); } }
.why article { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.why h3 { font-size: var(--t-md); margin-top: var(--s3); }
.why p { margin-top: var(--s1); font-size: var(--t-base); color: var(--muted); }
.why-ico { width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.why-ico svg { width: 19px; height: 19px; }

.sitefoot {
  border-top: 1px solid var(--line); background: var(--surface);
  padding-block: var(--s8) calc(var(--tabbar-h) + var(--sab) + var(--s6));
}
@media (min-width: 768px) { .sitefoot { padding-block: var(--s10); } }
.sitefoot p { color: var(--muted); font-size: var(--t-base); margin-top: var(--s2); }
.sitefoot small { display: block; margin-top: var(--s5); color: var(--muted-2); font-size: var(--t-sm); }

/* --- 21. Sayfa başlığı ----------------------------------------------------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); }
.page-head h1 { font-size: var(--t-2xl); }
.page-head > div > p { margin-top: var(--s2); color: var(--muted); font-size: var(--t-base); max-width: 54ch; }

/* --- 22. Yardımcılar ------------------------------------------------------- */
.text-muted { color: var(--muted); }
.text-sm { font-size: var(--t-sm); }
.mt-0 { margin-top: 0; } .mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); } .mt-6 { margin-top: var(--s6); }
.break-word, .document p, .document td, .selected-file, .status, .product-body h3, .product-body p { overflow-wrap: anywhere; }

/* --- 23. Yazdırma --------------------------------------------------------- */
@media print {
  :root { --sab: 0px; --sat: 0px; }
  body { background: #fff; overflow: visible; }
  .appbar, .tabbar, .page-head, .steps, .no-print, .skip-link, .toast-host,
  .workspace > .panel:first-child, .sheet-backdrop { display: none !important; }
  .page, .wrap, .workspace { display: block; padding: 0; margin: 0; max-width: none; width: 100%; }
  .panel.preview, .preview { border: 0; box-shadow: none; padding: 0; background: none; }
  .document, .catalog-sheet { border: 0; box-shadow: none; border-radius: 0; padding: 10mm; }
  .table-scroll { overflow: visible !important; }
  .catalog-cover, .product-card { break-inside: avoid; }
  a[href]::after { content: ""; }

  /* Teklif ve katalog sayfalarında TARAYICI YAZDIRMASI KULLANILMAZ.
     Belge zaten hazır bir PDF olarak üretiliyor; sayfayı yazdırmak yalnızca
     ekrandaki tek bir önizleme karesini, üstelik tarayıcının kendi üstbilgisi
     (adres, tarih, sayfa başlığı) ile basardı. Bu yüzden bu iki sayfada
     yazdırma çıktısı içeriği değil, doğru yolu gösteren bir not verir. */
  body[data-page="quote"] .workspace,
  body[data-page="quote"] .doc-actions,
  body[data-page="quote"] .view-switch,
  body[data-page="catalog"] .workspace,
  body[data-page="catalog"] .doc-actions,
  body[data-page="catalog"] .view-switch { display: none !important; }
  body[data-page="quote"] .wrap::after,
  body[data-page="catalog"] .wrap::after {
    content: "Bu sayfayı yazdırmayın. “PDF indir” düğmesiyle belgeyi indirin: indirilen PDF A4 ölçüsünde, sayfa numaralıdır ve tarayıcı üstbilgisi (adres, tarih) içermez. İndirdiğiniz PDF’i yazdıracaksanız yazdırma penceresinde “Üstbilgi ve altbilgi” seçeneğini kapatın.";
    display: block; max-width: 92mm; margin: 40mm auto 0;
    font-size: 11pt; line-height: 1.6; text-align: center; color: #000;
  }
}

/* --- 24. Azaltılmış hareket ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Onay sıfırlama satırı (AI panelinin altında) */
.ai-consent-reset {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding-top: var(--s3); border-top: 1px solid var(--line);
}