/* GençTek marka paleti — Pantone 7621 C (#c4161c), Neutral Black U (#414042),
   Cool Gray 8 U (#939598) ve beyaz. Portalın app/globals.css dosyasındaki
   değişkenlerle birebir aynı; kurumsal kabuk da oradaki kurguyu izliyor:
   üstte ve altta kırmızı bant, arada beyaz içerik. Kırmızı dekorasyon değil,
   sayfayı çerçeveleyen kimliktir; vurgu için tek kırmızı alan kuralı geçerli.

   Tipografi: portal Archivo + Source Sans 3 kullanıyor. Bu uygulamanın CSP'si
   dış kaynak yüklemediği ve harici bağımlılığı olmadığı için aynı yedek yığını
   ("Segoe UI", system-ui) ile aynı ölçek ve tracking değerleri uygulanıyor. */
:root {
  --brand-red: #c4161c;
  --neutral-black: #414042;
  --cool-gray: #939598;

  --color-bg: #fff; --color-bg-subtle: #f6f6f7; --color-bg-brand-tint: #fdf1f1; --color-bg-inverse: var(--neutral-black);
  --color-surface: #fff; --color-border: #e4e4e5; --color-border-strong: var(--cool-gray);
  --color-text: #555558; --color-text-strong: var(--neutral-black); --color-text-muted: #6e6f71; --color-text-inverse: #fff; --color-text-on-brand: #fff;
  --color-brand: var(--brand-red); --color-brand-hover: #a81318; --color-brand-active: #8e1014; --color-brand-soft: #e35056; --color-focus: var(--neutral-black);
  --color-success: #1c7a4a; --color-warning: #8a5a00; --color-danger: #a81318; --color-info: #55565a;

  --shadow-sm: 0 1px 2px rgba(65,64,66,.06),0 1px 3px rgba(65,64,66,.04);
  --shadow-md: 0 4px 12px rgba(65,64,66,.09);
  --shadow-lg: 0 14px 34px rgba(65,64,66,.13);

  --font-display: "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box }
/* .button ve .text-link display değeri atadığı için tarayıcının [hidden]
   kuralını eziyordu: giriş yapıldığında "Yönetici girişi" düğmesi hidden
   işaretlendiği hâlde ekranda kalıyordu. */
[hidden] { display: none !important }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 400 1.0625rem/1.65 var(--font-body); -webkit-text-size-adjust: 100% }
a { color: inherit; text-decoration: none }
button, input, select, textarea { font: inherit; color: inherit }
button, a, input, select, textarea { outline-offset: 2px }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--color-focus) }
h1, h2, h3 { margin-top: 0; color: var(--color-text-strong); font-family: var(--font-display); font-weight: 800; letter-spacing: -.028em; line-height: 1.12; text-wrap: balance }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); line-height: 1.06; margin-bottom: 16px }
h2 { font-size: clamp(1.4rem, 1.2rem + .9vw, 1.9rem) }
p { margin-top: 0 }
.container { width: min(1240px, calc(100% - 48px)); margin-inline: auto }
.eyebrow { display: block; font-family: var(--font-display); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-brand); margin: 0 0 14px }

/* --- Düğmeler ---------------------------------------------------------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: 8px; font-family: var(--font-display); font-weight: 600; cursor: pointer; transition: background 120ms, border-color 120ms, color 120ms, transform 120ms }
.button:hover { transform: translateY(-1px) }
.button:disabled { opacity: .6; cursor: wait; transform: none }
.button-primary { background: var(--color-brand); color: var(--color-text-on-brand) }
.button-primary:hover { background: var(--color-brand-hover) }
.button-secondary { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text-strong) }
.button-danger { background: var(--color-surface); border-color: var(--color-danger); color: var(--color-danger) }
.button-danger:hover { background: var(--color-danger); color: #fff }
.text-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; color: var(--color-brand); font-family: var(--font-display); font-weight: 700; font-size: .88rem; cursor: pointer }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px }

/* --- Marka ------------------------------------------------------------- */
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 900; letter-spacing: -.04em; font-size: 1.18rem; color: var(--color-text-strong) }
.brand small { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .85 }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: #fff; overflow: hidden; flex: none }
.brand-mark img { width: 100%; height: 100%; object-fit: contain }

/* --- Üst bant: kurumsal kırmızı --------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 20; min-height: 72px; background: var(--color-brand); color: #fff; box-shadow: 0 1px 0 rgba(65,64,66,.10) }
.header-inner { min-height: 72px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-block: 10px }
.site-header .brand, .site-header .brand-accent { color: #fff }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.who { font-family: var(--font-display); font-size: .82rem; font-weight: 600; color: #fff; padding: 5px 11px; border-radius: 9999px; background: rgba(255,255,255,.16) }
.header-cta { background: #fff; border-color: #fff; color: var(--color-brand) }
.header-cta:hover { background: var(--color-bg-brand-tint); color: var(--color-brand-active) }
.button-ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; font-size: .88rem; min-height: 40px; padding: 8px 14px }
.button-ghost:hover { background: rgba(255,255,255,.14) }

/* --- Giriş bölümü ------------------------------------------------------ */
.page-hero { background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); padding: 56px 0 48px }
.hero-inner { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center }
.hero-lede { font-size: 1.12rem; margin: 0 }
/* Sekiz kart: genişte tek sıra ve satırı sağ kenara kadar doldurur; daraldıkça
   4'lü, telefonda 2'li sıra (aşağıdaki @media kuralları). Sayı açıkça verilir:
   auto-fill/auto-fit, tüm satırı kaplayan başlık yüzünden boş sütun bırakıyordu. */
.hero-stats { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px }
/* Başlık solda, onay kutusu ile "Filtreleri temizle" sağda yan yana durur:
   boşluğu başlık emer, yoksa üç öğede ortadaki ortaya kayar. */
.stats-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap }
.stats-head #stat-caption { margin-right: auto }
.hero-stats .eyebrow { margin: 0; text-transform: capitalize }
.stats-toggle { margin: 0; cursor: pointer }
#stat-clear:disabled { opacity: .45; cursor: default }
#stat-clear:disabled:hover { text-decoration: none }
.hero-stats .stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 14px 12px; display: grid; text-align: left; box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color 120ms, transform 120ms }
.hero-stats .stat:hover { border-color: var(--color-brand); transform: translateY(-1px) }
.hero-stats .stat[aria-expanded="true"] { border-color: var(--color-brand); box-shadow: 0 0 0 2px var(--color-brand) }
/* Kart açılırken panel 0fr→1fr ile yumuşak iner; kapanış anındır. */
.stat-breakdown { grid-column: 1 / -1; display: grid; grid-template-rows: 1fr; transition: grid-template-rows 1000ms cubic-bezier(.22, .61, .36, 1) }
.stat-breakdown.is-opening { grid-template-rows: 0fr }
.stat-breakdown-body { overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-sm); opacity: 1; transition: opacity 1000ms ease }
.stat-breakdown.is-opening .stat-breakdown-body { opacity: 0 }
@media (prefers-reduced-motion: reduce) { .stat-breakdown, .stat-breakdown-body { transition: none } }
.stat-breakdown p { margin: 0 0 8px; font-size: .8rem; color: var(--color-text-muted) }
.stat-pills { display: flex; flex-wrap: wrap; gap: 6px }
.stat-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border-strong); border-radius: 9999px; background: var(--color-surface); padding: 4px 10px; font-size: .8rem; font-weight: 600; cursor: pointer }
.stat-pill b { font-weight: 800; color: var(--color-brand); font-variant-numeric: tabular-nums }
.stat-pill:hover { border-color: var(--color-brand); color: var(--color-brand) }
.stat-pill[aria-pressed="true"] { background: var(--color-brand); border-color: var(--color-brand); color: #fff }
.stat-pill[aria-pressed="true"] b { color: #fff }
.partner-list { display: grid; gap: 10px }
.partner-item { padding-bottom: 10px; border-bottom: 1px solid var(--color-border) }
.partner-item:last-child { border-bottom: 0; padding-bottom: 0 }
.partner-item > .stat-pills { margin-top: 6px }
.partner-item > .stat-events { margin-top: 4px; border-top: 0 }
.stat-events { margin-top: 12px; border-top: 1px solid var(--color-border) }
.stat-events > p { margin: 10px 0 0 }
.stat-events .agenda-item { grid-template-columns: 62px 1fr; gap: 12px; padding: 10px 2px }
.stat-events .agenda-item:last-child { border-bottom: 0 }
.stat-events .empty { padding: 20px 2px }
.agenda-note { font-style: normal; font-weight: 800; color: var(--color-brand); white-space: nowrap }
/* Giriş sayfası (giris.html): takvim yalnızca oturum açan kullanıcıya açıktır. */
.login-main { display: flex; justify-content: center; padding: 48px 16px 72px }
.login-card { width: 100%; max-width: 420px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 28px; box-shadow: var(--shadow-sm); display: grid; gap: 12px }
.login-card h1 { margin: 0; font-size: 1.4rem; color: var(--color-text-strong) }
.login-lede { margin: 0 0 4px; font-size: .88rem; color: var(--color-text-muted) }
.login-card label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--color-text-strong) }
.login-card input { padding: 10px 12px; border: 1px solid var(--color-border-strong); border-radius: 8px; background: var(--color-surface); font: inherit }
.login-card .error:empty { display: none }
.login-card .text-link { justify-self: center }
.notice { margin: 0; padding: 12px 14px; border: 1px solid var(--color-brand); border-radius: 8px; background: color-mix(in srgb, var(--color-brand) 8%, var(--color-surface)); color: var(--color-text-strong); font-size: .88rem }
.range-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .82rem; color: var(--color-text-muted) }
.view-checks, .report-checks { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: .85rem }
.view-checks { flex-basis: 100% }
.report-checks { margin: 4px 0 12px }
.range-pick input { padding: 6px 8px; border: 1px solid var(--color-border-strong); border-radius: 8px; background: var(--color-surface); font: inherit }
.grid-title { margin: 18px 24px 6px; font-size: 1rem; color: var(--color-text-strong) }
.grid-title:first-child { margin-top: 0 }
.grid-note { margin: 12px 24px; font-size: .82rem; color: var(--color-text-muted) }
.hero-stats strong { font: 800 1.8rem/1 var(--font-display); color: var(--color-brand); font-variant-numeric: tabular-nums }
.hero-stats span { font-size: .78rem; color: var(--color-text-muted); margin-top: 6px }
.hero-stats small { grid-column: 1 / -1; font-size: .76rem; color: var(--color-text-muted) }
/* Döküm başlıkları sayaçların büyük rakam stilini almasın. */
.hero-stats .partner-item strong { font: 700 .9rem/1.3 var(--font-body); color: var(--color-text-strong) }
.hero-stats .partner-item small { grid-column: auto; font-size: .76rem }

/* --- Çalışma alanı ----------------------------------------------------- */
.workspace { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; padding: 40px 0 72px; align-items: start }
aside { display: grid; gap: 8px; position: sticky; top: 92px }
aside label { font-family: var(--font-display); font-size: .82rem; font-weight: 650; color: var(--color-text-strong); margin-top: 8px }
aside input, aside select { width: 100%; min-height: 44px; border: 1px solid var(--color-border-strong); border-radius: 6px; padding: 9px 12px; background: var(--color-surface) }
aside input:focus, aside select:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 14%, transparent) }
.check { display: flex; align-items: center; gap: 9px; font-weight: 400; font-size: .86rem; color: var(--color-text) }
.check input { width: auto; min-height: auto; accent-color: var(--color-brand) }
#clear { justify-self: start; margin-top: 14px }
.aside-note { margin-top: 22px; padding: 18px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg-brand-tint) }
.aside-note p { font-size: .85rem; margin: 0 0 10px }
.aside-note p:last-child { margin-bottom: 0 }
.aside-note input { font-size: .76rem; background: var(--color-surface); margin-bottom: 10px }
/* Abonelik adresi parola yerine geçer; uyarı adresin hemen altında durur. */
.aside-note .hint { font-size: .78rem; color: var(--color-text-muted) }
.aside-note #feed-reset { margin-top: 12px; font-size: .8rem; font-weight: 600 }
.aside-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.aside-actions .button { min-height: 38px; padding: 7px 14px; font-size: .85rem }

/* --- Takvim paneli ----------------------------------------------------- */
.calendar-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 24px; border-bottom: 1px solid var(--color-border); flex-wrap: wrap }
.panel-head h2 { margin: 0; text-transform: capitalize }
.panel-actions { display: flex; gap: 10px; flex-wrap: wrap }
.calendar-controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 24px; background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); flex-wrap: wrap }
.nav, .view-toggle { display: flex; gap: 6px }
.nav button, .view-toggle button { min-height: 38px; min-width: 40px; padding: 6px 14px; border: 1px solid var(--color-border-strong); border-radius: 6px; background: var(--color-surface); font-family: var(--font-display); font-weight: 650; font-size: .88rem; cursor: pointer }
.nav button:hover, .view-toggle button:hover { border-color: var(--color-brand); color: var(--color-brand) }
.pickers { display: flex; gap: 6px; flex-wrap: wrap }
.pickers select { min-height: 38px; border: 1px solid var(--color-border-strong); border-radius: 6px; padding: 6px 10px; background: var(--color-surface); font-family: var(--font-display); font-weight: 600; font-size: .88rem; max-width: 100% }
.day-more { border: 0; background: none; padding: 2px 4px; text-align: left; color: var(--color-brand); font-size: .72rem; font-weight: 700; cursor: pointer }
.day-more:hover { text-decoration: underline }
.stat-more { display: block; margin-top: 8px; padding: 4px 0; font-size: .8rem }
/* Arama sonuçları yan panelde, kart listeleri gibi; uzun liste kendi içinde kayar. */
.search-results { max-height: 60vh; overflow-y: auto }
.search-results > p { margin: 4px 0 0; font-weight: 600; color: var(--color-text-strong) }
.search-results .stat-events { margin-top: 6px }
.view-toggle button[aria-pressed="true"] { background: var(--color-text-strong); border-color: var(--color-text-strong); color: #fff }
#status { margin: 0; padding: 0 24px; color: var(--color-text-muted); font-size: .85rem }
#status:not(:empty) { padding: 14px 24px; color: var(--color-danger) }

.week { display: grid; grid-template-columns: repeat(7, 1fr); padding: 12px 24px 0; font-family: var(--font-display); font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: var(--color-text-muted) }
.week span { padding-bottom: 8px }
.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--color-border); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border) }
.day { background: var(--color-surface); min-height: 118px; padding: 8px 8px 10px; display: flex; flex-direction: column; gap: 4px }
.day.outside { background: var(--color-bg-subtle) }
.day.outside .day-number { color: var(--color-cool-gray, #939598); opacity: .65 }
.day-number { font-family: var(--font-display); font-size: .8rem; font-weight: 700; color: var(--color-text-strong) }
.day.is-today { box-shadow: inset 0 0 0 2px var(--color-brand) }
.day.is-today .day-number { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 9999px; background: var(--color-brand); color: #fff }
.today-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 2px solid var(--color-brand); vertical-align: -2px; margin-right: 6px }

.event-chip { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--color-brand); border-radius: 4px; background: var(--color-bg-brand-tint); color: var(--color-brand-active); padding: 4px 6px; font-size: .72rem; line-height: 1.32; font-weight: 600; cursor: pointer; overflow: hidden }
.event-chip:hover { background: var(--color-brand); color: #fff }
.event-chip span { display: block; font-weight: 400; opacity: .85 }
.event-chip.is-ertelendi { border-left-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface)); color: var(--color-warning) }
.event-chip.is-iptal { border-left-color: var(--color-cool-gray, #939598); background: var(--color-bg-subtle); color: var(--color-text-muted); text-decoration: line-through }
/* Planlanan gri, tamamlanan (varsayılan) kırmızı. */
.event-chip.is-planlandi { border-left-color: var(--color-cool-gray, #939598); background: color-mix(in srgb, var(--color-cool-gray, #939598) 16%, var(--color-surface)); color: var(--color-text-strong) }
.event-chip.is-planlandi:hover { background: var(--color-text-strong); color: #fff }
.legend { display: flex; gap: 6px 16px; flex-wrap: wrap }
.status-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--color-brand); vertical-align: -2px; margin-right: 6px }
.status-key.is-planlandi { background: var(--color-cool-gray, #939598) }
.status-key.is-ertelendi { background: var(--color-warning) }

#agenda { padding: 8px 0 }
.agenda-item { display: grid; grid-template-columns: 78px 1fr; gap: 18px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--color-border); background: none; padding: 16px 24px; cursor: pointer }
.agenda-item:hover { background: var(--color-bg-subtle) }
.agenda-date { display: grid; place-content: center; text-align: center; border-radius: 8px; background: var(--color-bg-brand-tint); color: var(--color-brand); padding: 8px; font-family: var(--font-display); font-weight: 800; font-size: .95rem; font-variant-numeric: tabular-nums }
.agenda-date small { display: block; font-size: .72rem; font-weight: 600; opacity: .85 }
.agenda-item.is-planlandi .agenda-date { background: color-mix(in srgb, var(--color-cool-gray, #939598) 16%, var(--color-surface)); color: var(--color-text-strong) }
.agenda-body strong { display: block; color: var(--color-text-strong); font-size: 1rem }
.agenda-body small { display: block; color: var(--color-text-muted); font-size: .82rem; margin-top: 2px }
.empty { padding: 56px 24px; text-align: center; color: var(--color-text-muted) }
.calendar-footer { display: flex; justify-content: space-between; gap: 16px; padding: 14px 24px; font-size: .8rem; color: var(--color-text-muted); background: var(--color-bg-subtle); border-top: 1px solid var(--color-border) }

/* --- Alt bant ---------------------------------------------------------- */
.site-footer { background: linear-gradient(115deg, var(--color-brand-active), var(--color-brand)); color: color-mix(in srgb, #fff 88%, transparent); padding: 40px 0 }
.footer-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap }
.footer-inner p { margin: 0; font-size: .9rem }
.brand-inverse, .brand-inverse .brand-accent { color: #fff }

/* --- Kutular ----------------------------------------------------------- */
dialog { width: min(620px, calc(100% - 32px)); border: 1px solid var(--color-border); border-radius: 16px; padding: 28px; box-shadow: var(--shadow-lg); color: var(--color-text); background: var(--color-surface) }
dialog::backdrop { background: rgba(65,64,66,.45) }
dialog form { display: grid; gap: 16px }
.dialog-top { display: flex; justify-content: space-between; align-items: start; gap: 16px }
.dialog-top h2, .dialog-top .eyebrow { margin: 0 }
.close { border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--color-text-muted); cursor: pointer; padding: 0 4px }
.close:hover { color: var(--color-brand) }
dialog label { display: grid; gap: 6px; font-family: var(--font-display); font-size: .88rem; font-weight: 650; color: var(--color-text-strong) }
dialog label small { font-weight: 400; color: var(--color-text-muted) }
dialog input, dialog select, dialog textarea { width: 100%; min-height: 44px; border: 1px solid var(--color-border-strong); border-radius: 6px; padding: 9px 12px; background: var(--color-surface) }
dialog input:focus, dialog select:focus, dialog textarea:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 14%, transparent) }
dialog textarea { resize: vertical }
dialog .check { font-family: var(--font-display); font-weight: 650; color: var(--color-text-strong) }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.form-row-3 { grid-template-columns: repeat(3, 1fr) }
/* Açıklamalı etiket sütunu uzatınca yandaki kutular esnemesin, alta hizalansın. */
.form-row > label { align-content: end }
.choice { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px }
.choice legend { font-family: var(--font-display); font-size: .88rem; font-weight: 650; color: var(--color-text-strong); padding: 0; margin-bottom: 8px }
.choice legend small { font-weight: 400; color: var(--color-text-muted) }
.choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px }
dialog label.choice-card { display: flex; align-items: center; gap: 8px; border: 1px solid var(--color-border-strong); border-radius: 8px; padding: 10px 12px; font-size: .85rem; line-height: 1.25; cursor: pointer }
dialog label.choice-card:hover { border-color: var(--color-brand) }
dialog label.choice-card:has(input:checked) { border-color: var(--color-brand); background: var(--color-bg-brand-tint); box-shadow: 0 0 0 1px var(--color-brand) }
dialog label.choice-card:has(input:disabled) { opacity: .5; cursor: not-allowed }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 12px }
.city-pickers { display: grid; gap: 10px }
/* Rapor penceresi: aramayla eşleşen etkinlikler, ad üstte, tarih / il altta. */
dialog .report-matches { grid-template-columns: 1fr }
dialog .report-matches label { align-items: flex-start }
dialog .report-matches small { display: block; font-weight: 400; color: var(--color-text-muted) }
dialog .report-matches .empty { margin: 0; padding: 8px 0; color: var(--color-text-muted) }
.report-outside { display: grid; gap: 6px; justify-items: start; border-top: 1px dashed var(--color-border); padding-top: 8px; margin-top: 4px }
.report-outside > p { margin: 0; font-size: .82rem; font-weight: 600; color: var(--color-text-muted) }
.report-outside-item { font-size: .85rem; opacity: .75 }
/* Kapsam kartlarıyla aynı genişlik: üç sütunluk ızgarada iki kart. */
.city-toggles { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.check-scroll { max-height: 220px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px }
dialog .check-grid label { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: .85rem; padding: 3px 0 }
dialog .check-grid label.is-passive { color: var(--color-text-muted); cursor: not-allowed }
dialog .choice input[type="radio"], dialog .choice input[type="checkbox"], dialog .city-toggles input[type="checkbox"] { width: auto; min-height: auto; margin: 0; accent-color: var(--color-brand) }
.error:empty { display: none }
.error { margin: 0; padding: 12px 14px; border: 1px solid var(--color-danger); border-radius: 8px; background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface)); color: var(--color-danger); font-size: .88rem }
.detail-list { display: grid; gap: 10px; margin: 0 0 18px; padding: 16px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg-subtle); font-size: .9rem }
.detail-list > div { display: grid; grid-template-columns: 120px 1fr; gap: 12px }
.detail-list dt { font-family: var(--font-display); font-weight: 700; color: var(--color-text-strong) }
.detail-list dd { margin: 0 }
.detail-block { margin: 0 0 16px }
.detail-block h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted) }
.detail-block p { margin: 0; white-space: pre-wrap }
.detail-block ul { margin: 0; padding-left: 18px }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: 0 0 16px }
.photo-grid button { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px }
.photo-grid button:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px }
.photo-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-border) }
.photo-grid button:hover img { border-color: var(--color-brand) }

/* --- Belge ekleri (katılımcı listesi, görev dağılımı…) ------------------
   Aynı liste iki yerde: formda kaldırma düğmesiyle, detayda salt okunur
   indirme bağlantısı olarak (.is-readonly). */
.field-note { margin: 0; font-size: .8rem; color: var(--color-text-muted) }
.file-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none }
.file-list:empty { display: none }
.file-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px; background: var(--color-surface) }
.file-list.is-readonly .file-item { grid-template-columns: auto minmax(0, 1fr) auto }
.file-tag { font-family: var(--font-display); font-size: .66rem; font-weight: 700; letter-spacing: .04em; border-radius: 4px; padding: 4px 6px; background: var(--color-bg-brand-tint); color: var(--color-brand-active) }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .87rem; color: var(--color-text-strong) }
a.file-name { text-decoration: underline; text-underline-offset: 2px }
a.file-name:hover { color: var(--color-brand) }
.file-size { font-size: .76rem; color: var(--color-text-muted); white-space: nowrap }
.file-item button { width: 32px; height: 32px; border: 1px solid var(--color-border-strong); border-radius: 6px; background: var(--color-surface); font-size: 1.1rem; line-height: 1; cursor: pointer }
.file-item button:hover { border-color: var(--color-danger); color: var(--color-danger) }

/* --- Fotoğraf galerisi -------------------------------------------------- */
dialog.gallery { width: min(1000px, calc(100% - 24px)); padding: 0; border: 0; background: #1b1b1d; color: #fff; overflow: hidden }
dialog.gallery::backdrop { background: rgba(20,20,22,.82) }
/* Kapat düğmesi fotoğrafın üstünde durur: açık bir görselde kaybolmasın
   diye oklarla aynı koyu madalyonu taşır. */
dialog.gallery .close { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 9999px; background: rgba(0,0,0,.5); color: #fff; font-size: 1.5rem }
dialog.gallery .close:hover { background: var(--color-brand); color: #fff }
.gallery-stage { position: relative; margin: 0; display: flex; align-items: center; justify-content: center; min-height: 240px; background: #111113; touch-action: pan-y }
.gallery-stage img { display: block; max-width: 100%; max-height: min(72vh, 620px); object-fit: contain; user-select: none; -webkit-user-drag: none }
.gallery-bar { display: grid; gap: 10px; justify-items: center; padding: 12px 16px 16px }
.gallery-bar p { margin: 0; font-size: .85rem; color: #d7d7da; text-align: center }
.gallery-thumbs { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; padding: 2px }
.gallery-thumbs button { flex: 0 0 auto; padding: 0; border: 2px solid transparent; border-radius: 6px; background: none; cursor: pointer; opacity: .55 }
.gallery-thumbs button.is-current, .gallery-thumbs button:hover { opacity: 1; border-color: var(--color-brand) }
.gallery-thumbs img { display: block; width: 56px; height: 42px; object-fit: cover; border-radius: 4px }
/* Yön okları: portaldaki galeriyle aynı görünüm (genctek-portal). */
.galeri-yon-oku { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 9999px; background: rgba(0,0,0,.5); cursor: pointer }
.galeri-yon-oku:hover { background: var(--color-brand) }
/* Ok, iki kenarı çizili bir karenin döndürülmüşü; çizgiler ortalansın diye
   döndürmeden sonra yarım kenar kaydırılır. */
.galeri-yon-oku::before { content: ''; display: block; width: 12px; height: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff }
.galeri-yon-oku-sol { left: 10px }
.galeri-yon-oku-sol::before { transform: rotate(-135deg) translate(-2px, -2px) }
.galeri-yon-oku-sag { right: 10px }
.galeri-yon-oku-sag::before { transform: rotate(45deg) translate(-2px, 2px) }
@media (max-width: 620px) {
  .galeri-yon-oku { width: 38px; height: 38px }
  .gallery-stage img { max-height: 56vh }
}
/* Formdaki "+ ekle" düğmeleri, fotoğraf önizlemeleri ve paydaş satırları */
.inline-add { justify-self: start; min-height: 38px; padding: 7px 14px; font-size: .85rem }
.partner-rows { display: grid; gap: 8px }
.partner-rows:empty { display: none }
.partner-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center }
.partner-row button { width: 40px; min-height: 44px; border: 1px solid var(--color-border-strong); border-radius: 6px; background: var(--color-surface); font-size: 1.2rem; cursor: pointer }
.partner-row button:hover { border-color: var(--color-danger); color: var(--color-danger) }
.photo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px }
.photo-list:empty { display: none }
.photo-thumb { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--color-border) }
.photo-thumb img { display: block; width: 100%; height: 100%; object-fit: cover }
.photo-thumb button { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 0; border-radius: 9999px; background: rgba(0,0,0,.62); color: #fff; font-size: 1.05rem; line-height: 1; cursor: pointer }
.status-badge { display: inline-block; width: max-content; border-radius: 4px; padding: 4px 10px; font-family: var(--font-display); font-size: .78rem; font-weight: 700; background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface)); color: var(--color-warning); margin: 0 0 14px }
.status-badge.is-tamamlandi { background: var(--color-bg-brand-tint); color: var(--color-brand-active) }
.status-badge.is-iptal { background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface)); color: var(--color-danger) }
.detail-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px }

/* --- Kullanıcı yönetimi ------------------------------------------------ */
dialog.wide { width: min(860px, calc(100% - 32px)) }
.dialog-lede { font-size: .9rem; color: var(--color-text-muted); margin: 4px 0 20px }
#users-search { width: 100%; margin: 0 0 10px; border: 1px solid var(--color-border-strong); border-radius: 6px; padding: 8px 12px; background: var(--color-surface) }
.users-list { border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden }
.user-row { display: grid; grid-template-columns: minmax(140px, 1fr) 190px auto; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--color-border) }
.user-row:last-child { border-bottom: 0 }
.user-row:nth-child(even) { background: var(--color-bg-subtle) }
.user-row strong { display: block; color: var(--color-text-strong); font-family: var(--font-display) }
.user-row small { display: block; color: var(--color-text-muted); font-size: .76rem }
.user-row select { min-height: 38px; border: 1px solid var(--color-border-strong); border-radius: 6px; padding: 6px 8px; background: var(--color-surface); font-size: .85rem; width: 100% }
.users-head { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: space-between }
.users-list + .users-head { margin-top: 22px }
.user-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end }
.user-actions button { min-height: 36px; padding: 6px 12px; font-size: .82rem; border-radius: 6px; border: 1px solid var(--color-border-strong); background: var(--color-surface); font-family: var(--font-display); font-weight: 600; cursor: pointer }
.user-actions button:hover { border-color: var(--color-brand); color: var(--color-brand) }
.user-actions .danger:hover { border-color: var(--color-danger); background: var(--color-danger); color: #fff }
.role-badge { display: inline-block; border-radius: 4px; padding: 2px 8px; font-size: .72rem; font-weight: 700; background: var(--color-bg-brand-tint); color: var(--color-brand-active) }
.user-form { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--color-border) }
.user-form small { display: block; font-weight: 400; color: var(--color-text-muted); font-size: .76rem; margin-top: 2px }
.password-row { display: flex; gap: 10px }
.password-row input { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace }
.password-row .button { white-space: nowrap; min-height: 44px }

@media (max-width: 1040px) {
  .hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .hero-inner { grid-template-columns: 1fr; gap: 28px }
  .workspace { grid-template-columns: 1fr }
  aside { position: static }
}
@media (max-width: 720px) {
  .container { width: calc(100% - 28px) }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .page-hero { padding: 36px 0 32px }
  .grid { gap: 0; grid-template-columns: 1fr; border: 0 }
  .week { display: none }
  .day { min-height: 0; border-bottom: 1px solid var(--color-border); flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px }
  .day:not(:has(.event-chip)) { display: none }
  .day .event-chip { width: auto; flex: 1 1 100% }
  .form-row { grid-template-columns: 1fr }
  .detail-list > div { grid-template-columns: 1fr; gap: 2px }
}

/* --- Formlar sayfası (formlar.html) ------------------------------------
   Alanlar iletişim pencerelerindeki (dialog) biçimi izler; sayfa kendi
   kapsamında (.fp) aynı kuralları taşır. */
.fp-hero { padding: 40px 0 32px }
.fp-hero h1 { margin-bottom: 10px }
/* Sütun minmax(0, 1fr): "auto" sütun içeriği kadar genişler, geniş yanıt
   tablosu sayfayı taşırırdı; böyle tablo kendi kutusunda yatay kayar. */
.fp-body { padding: 28px 0 72px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px }
.fp-body > section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px }
.fp label { display: grid; gap: 6px; font-family: var(--font-display); font-size: .88rem; font-weight: 650; color: var(--color-text-strong) }
.fp label small, .fp .muted { font-weight: 400; color: var(--color-text-muted); font-size: .82rem }
.fp p.muted { margin: 0 }
.fp input:not([type="checkbox"]):not([type="radio"]), .fp select, .fp textarea { width: 100%; min-height: 44px; border: 1px solid var(--color-border-strong); border-radius: 6px; padding: 9px 12px; background: var(--color-surface) }
.fp input:focus, .fp select:focus, .fp textarea:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 14%, transparent) }
.fp input:disabled, .fp select:disabled, .fp textarea:disabled { background: var(--color-bg-subtle); color: var(--color-text-strong); cursor: not-allowed }
.fp textarea { resize: vertical }
.fp input[type="checkbox"], .fp input[type="radio"] { width: auto; min-height: auto; margin: 0; accent-color: var(--color-brand) }
.fp label.check { display: flex; font-weight: 650 }
.fp label.choice-card { display: flex; align-items: center; gap: 8px; border: 1px solid var(--color-border-strong); border-radius: 8px; padding: 10px 12px; font-size: .88rem; line-height: 1.25; cursor: pointer }
.fp label.choice-card:has(input:checked) { border-color: var(--color-brand); background: var(--color-bg-brand-tint); box-shadow: 0 0 0 1px var(--color-brand) }
.fp .check-grid label { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: .85rem; padding: 3px 0 }
.fp-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 20px 22px; box-shadow: var(--shadow-sm) }
.fp-card h3 { font-size: 1.05rem; margin-bottom: 4px }
.fp-stack { display: grid; gap: 16px }
.fp-toggle { align-self: end; min-height: 44px; flex-wrap: wrap }
.fp-toggle small { flex-basis: 100% }
.fp-inline { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap }
.fp-inline input[type="search"] { max-width: 240px }
.fp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.fp-toolbar > input[type="search"] { max-width: 360px }
.fp-note { margin: 0; padding: 12px 14px; border: 1px solid var(--color-border-strong); border-left: 4px solid var(--color-warning); border-radius: 8px; background: color-mix(in srgb, var(--color-warning) 6%, var(--color-surface)); font-size: .9rem; color: var(--color-text-strong) }
.fp-flash { border-left-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 7%, var(--color-surface)) }
.fp-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.fp-actions .error { flex-basis: 100% }
.fp-sticky { position: sticky; bottom: 0; z-index: 5; padding: 14px 0; background: color-mix(in srgb, var(--color-bg) 92%, transparent); border-top: 1px solid var(--color-border); backdrop-filter: blur(4px) }
.fp-add-row { display: flex; justify-content: center }
.text-link.is-danger { color: var(--color-danger) }
.text-link:disabled { opacity: .4; cursor: not-allowed; text-decoration: none }
.icon-button { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-text-strong); font-weight: 700; cursor: pointer }
.icon-button:hover:not(:disabled) { border-color: var(--color-brand); color: var(--color-brand) }
.icon-button:disabled { opacity: .35; cursor: not-allowed }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* Liste */
.form-list { display: grid; gap: 12px }
.form-card { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 18px 22px; box-shadow: var(--shadow-sm) }
.form-card:hover { border-color: var(--color-border-strong) }
.form-thumb { width: 120px; aspect-ratio: 4 / 1; flex: none; border-radius: 6px; object-fit: cover; background: var(--color-bg-subtle) }
@media (max-width: 720px) { .form-thumb { width: 100%; } }
.form-card-main { display: grid; gap: 4px; min-width: 0; flex: 1 1 360px }
.form-card h2 { font-size: 1.2rem; margin: 2px 0 0 }
.form-card h2 a:hover { color: var(--color-brand) }
.form-card-meta { margin: 0; font-size: .86rem; color: var(--color-text-muted) }
.form-card-actions { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap }
.form-badge { justify-self: start; border-radius: 4px; padding: 2px 9px; font-family: var(--font-display); font-size: .74rem; font-weight: 700 }
.form-badge.is-open { background: var(--color-bg-brand-tint); color: var(--color-brand-active) }
.form-badge.is-done { background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface)); color: var(--color-success) }
.form-badge.is-closed { background: var(--color-bg-subtle); color: var(--color-text-muted) }
.form-progress { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: .84rem }
.form-progress b { color: var(--color-text-strong) }
.form-progress progress, .bar { appearance: none; width: 180px; height: 8px; border: 0; border-radius: 9999px; background: var(--color-bg-subtle); overflow: hidden }
.form-progress progress::-webkit-progress-bar { background: var(--color-bg-subtle) }
.form-progress progress::-webkit-progress-value { background: var(--color-brand); border-radius: 9999px }
.form-progress progress::-moz-progress-bar { background: var(--color-brand); border-radius: 9999px }

/* Düzenleyici, doldurma ve yanıtlar — Google Formlar düzeni ---------------
   Liste dışındaki görünümlerde (body.is-gf) büyük başlık gizlenir; sayfa
   marka renginin açık tonuna döner, içerik 770 px'lik tek sütunda kartlar
   olarak dizilir. Başlık kartının üstünde kalın kırmızı bant, seçili soru
   kartının solunda şerit vardır. */
body.is-gf main.fp { background: var(--color-bg-brand-tint) }
body.is-gf .fp-hero { display: none }
body.is-gf .fp-body { width: min(770px, calc(100% - 32px)); padding-top: 20px }
.gf { gap: 12px !important }
body.is-gf .fp-sticky { background: color-mix(in srgb, var(--color-bg-brand-tint) 92%, transparent) }

.gf-tabs { display: flex; justify-content: center; gap: 4px; border-bottom: 1px solid var(--color-border); margin-bottom: 4px }
.gf-tabs > a, .gf-tabs > button { position: relative; padding: 10px 16px 12px; border: 0; background: none; font-family: var(--font-display); font-weight: 650; font-size: .92rem; color: var(--color-text-muted); cursor: pointer }
.gf-tabs > a:hover, .gf-tabs > button:hover { color: var(--color-text-strong) }
.gf-tabs > [aria-pressed="true"] { color: var(--color-brand) }
.gf-tabs > [aria-pressed="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--color-brand) }

.gf .fp-card { border-radius: 8px; padding: 22px 24px; border-color: var(--color-border) }

/* Başlık kartı */
.gf-header { position: relative; overflow: hidden; display: grid; gap: 8px; padding-top: 30px !important }
.gf-header::before { content: ""; position: absolute; inset: 0 0 auto; height: 10px; background: var(--color-brand) }
.gf-form-title { margin: 0; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem); font-weight: 400; letter-spacing: -.01em; line-height: 1.2 }
.gf-form-desc { font-size: .95rem; color: var(--color-text-strong) }
.gf-form-desc ul, .gf-form-desc ol, .rich-editor ul, .rich-editor ol { margin: 4px 0; padding-left: 24px }
.gf-header-foot { margin: 6px -24px 0; padding: 12px 24px 0; border-top: 1px solid var(--color-border); font-size: .88rem; color: var(--color-text-muted) }
.gf-header-foot p { margin: 0 0 2px }
.gf-header-foot .required { font-weight: 600 }
.gf-results-head { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.gf-results-head h2 { margin: 0 0 4px; font-size: 1.6rem; font-weight: 700 }
.gf-subtabs { justify-content: center }

/* Kapak görseli: Google'daki gibi 4:1, kenarları yuvarlak */
.gf-banner { position: relative; border-radius: 8px; overflow: hidden; background: var(--color-bg-subtle); aspect-ratio: 4 / 1 }
.gf-banner img { display: block; width: 100%; height: 100%; object-fit: cover }
.gf-banner-tools { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 8px; opacity: 0; transition: opacity 120ms }
.gf-banner:hover .gf-banner-tools, .gf-banner:focus-within .gf-banner-tools { opacity: 1 }
.gf-banner-tools .button { min-height: 34px; padding: 6px 12px; font-size: .84rem; box-shadow: var(--shadow-md) }
.gf-image-add { justify-self: start; margin-top: 4px; font-size: .84rem }
@media (hover: none) { .gf-banner-tools { opacity: 1 } }

/* Biçimli metin alanları ve araç çubuğu */
.gf-rich { display: grid }
.rich-editor { min-height: 1.6em; padding: 6px 2px; border-bottom: 1px solid var(--color-border); outline: none; overflow-wrap: anywhere; transition: border-color 120ms }
.rich-editor:hover { border-bottom-color: var(--color-border-strong) }
.rich-editor:focus { border-bottom: 2px solid var(--color-brand); padding-bottom: 5px; background: var(--color-bg-subtle) }
.rich-editor:empty::before { content: attr(data-placeholder); color: var(--color-text-muted); pointer-events: none }
.gf-title-input.rich-editor { font-family: var(--font-display); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem); font-weight: 400; line-height: 1.25; color: var(--color-text-strong) }
.gf-desc-input.rich-editor { font-size: .95rem; color: var(--color-text-strong) }
.rich-toolbar { display: flex; align-items: center; gap: 2px; padding: 4px 0 }
.gf-rich:not(:focus-within) .rich-toolbar { display: none }
.rich-toolbar button { display: inline-grid; place-items: center; min-width: 32px; height: 30px; padding: 0 6px; border: 0; border-radius: 4px; background: none; font-family: Georgia, serif; font-size: 1rem; color: var(--color-text-strong); cursor: pointer }
.rich-toolbar button:hover { background: var(--color-bg-subtle) }
.rich-toolbar button[aria-pressed="true"] { background: var(--color-bg-brand-tint); color: var(--color-brand) }
.rich-divider { width: 1px; height: 20px; margin: 0 4px; background: var(--color-border) }

/* Ayarlar */
.gf-settings { display: grid; gap: 4px }
.gf-settings h3 { margin: 0 0 6px; font-size: 1.05rem }
.fp label.gf-setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--color-border); font-weight: 600 }
.fp label.gf-setting > span { display: grid; gap: 2px }
.fp .gf-settings h3 + label.gf-setting { border-top: 0 }
.fp input.gf-date { width: auto !important; min-width: 170px }
.fp label.gf-setting.is-inline { padding: 0; border: 0; gap: 10px; font-size: .88rem }

/* Açma kapama anahtarı (Zorunlu, Yanıt almayı durdur) */
.fp input.gf-switch { appearance: none; position: relative; flex: none; width: 38px; height: 20px; margin: 0; border-radius: 9999px; background: var(--color-border-strong); cursor: pointer; transition: background 150ms }
.fp input.gf-switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform 150ms }
.fp input.gf-switch:checked { background: var(--color-brand) }
.fp input.gf-switch:checked::before { transform: translateX(18px) }

/* Soru kartları */
.question-list { display: grid; gap: 12px }
.question-card { position: relative; display: grid; gap: 12px }
.question-card.is-active { box-shadow: var(--shadow-md) }
.question-card.is-active::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; border-radius: 8px 0 0 8px; background: var(--color-brand) }
.question-card.is-preview { cursor: pointer; gap: 8px }
.question-card.is-preview:hover { border-color: var(--color-border-strong) }
.question-preview-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--color-text-strong) }
.question-head { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 12px; align-items: start }
.fp .question-head input[data-field] { min-height: 52px; border: 0; border-bottom: 1px solid var(--color-border-strong); border-radius: 4px 4px 0 0; background: var(--color-bg-subtle); font-size: 1rem; font-weight: 600; color: var(--color-text-strong) }
.fp .question-head input[data-field]:focus { border-bottom: 2px solid var(--color-brand); box-shadow: none }
.fp .question-head select { min-height: 52px }
.fp .question-card input.question-help, .fp .option-list input[data-option] { min-height: 36px; padding: 6px 2px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; font-size: .92rem }
.fp .question-card input.question-help:hover, .fp .option-list input[data-option]:hover { border-bottom-color: var(--color-border) }
.fp .question-card input.question-help:focus, .fp .option-list input[data-option]:focus { border-bottom: 2px solid var(--color-brand); box-shadow: none }
.question-preview { margin: 0; padding: 6px 0; border-bottom: 1px dotted var(--color-border-strong); color: var(--color-text-muted); font-size: .9rem; max-width: 50% }
.option-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
.option-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 36px; gap: 8px; align-items: center }
.option-list.is-preview li { grid-template-columns: 22px minmax(0, 1fr); font-size: .92rem; padding: 3px 0 }
.option-list .icon-button { border: 0; background: none; opacity: .6 }
.option-list li:hover .icon-button, .option-list .icon-button:focus-visible { opacity: 1 }
.option-add button { justify-self: start; padding: 6px 2px; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--color-text-muted); font-size: .92rem; cursor: pointer }
.option-add button:hover { border-bottom-color: var(--color-border) }
.option-mark { width: 18px; height: 18px; border: 2px solid var(--color-border-strong); border-radius: 9999px; font-size: .8rem; color: var(--color-text-muted) }
.option-mark.is-multi { border-radius: 3px }
.option-mark.is-select { border: 0; width: auto; height: auto; text-align: right }
.question-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--color-border) }
.question-tools { display: flex; align-items: center; gap: 4px 6px }
.question-foot .icon-button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; color: var(--color-text-muted) }
.question-foot .icon-button:hover:not(:disabled) { background: var(--color-bg-subtle); color: var(--color-text-strong) }
.icon-button svg { fill: currentColor }
.question-divider { width: 1px; height: 28px; margin: 0 8px; background: var(--color-border) }
/* Seçili kartın yanında yüzen "+": altına yeni soru ekler. */
.question-fab { position: absolute; top: 0; left: calc(100% + 14px); padding: 6px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm) }
.question-fab .icon-button { width: 38px; height: 38px; border: 0; border-radius: 50%; color: var(--color-text-strong) }
.question-fab .icon-button:hover { background: var(--color-bg-subtle); color: var(--color-brand) }
@media (max-width: 900px) { .question-fab { display: none } }
/* Sürükleme tutamağı: kartın üst ortasında, kart üzerine gelince belirginleşir.
   touch-action: none olmazsa dokunmatik ekranda sürükleme sayfayı kaydırır. */
.drag-handle { position: absolute; top: 1px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 44px; height: 20px; padding: 0; border: 0; background: none; color: var(--color-text-muted); opacity: .35; cursor: grab; touch-action: none }
.drag-handle svg { fill: currentColor; pointer-events: none }
.question-card:hover .drag-handle, .question-card.is-active .drag-handle { opacity: 1 }
/* Kartlar yer değiştirirken kayar; tutulan kart imleci gecikmesiz izler,
   bırakılınca (is-settling) yuvasına süzülür. */
.question-card { transition: transform 180ms ease, box-shadow 180ms ease }
.question-card.is-dragging { z-index: 6; transition: box-shadow 180ms ease; box-shadow: 0 14px 34px rgba(65,64,66,.22); cursor: grabbing }
.question-card.is-dragging.is-settling { transition: transform 180ms ease, box-shadow 180ms ease; box-shadow: var(--shadow-md) }
.question-card.is-dragging .drag-handle { cursor: grabbing; opacity: 1 }
body.is-sorting { user-select: none; cursor: grabbing }
@media (prefers-reduced-motion: reduce) { .question-card { transition: none !important } }
@media (hover: none) { .drag-handle { opacity: .7 } }

/* Doldurma */
.fill-question { margin: 0; display: grid; gap: 12px; min-width: 0 }
.fill-question legend { float: left; width: 100%; padding: 0; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--color-text-strong) }
.fill-question.has-error { border-color: var(--color-danger); box-shadow: 0 0 0 1px var(--color-danger) }
.fill-help { margin: 0; font-size: .86rem; color: var(--color-text-muted); white-space: pre-line }
.fill-error { margin: 0; color: var(--color-danger); font-size: .86rem; font-weight: 600 }
.fill-error::before { content: "⚠ " }
.required { color: var(--color-danger) }
.fill-options { display: grid; gap: 2px }
.fp label.fill-option { display: flex; align-items: flex-start; gap: 12px; font-weight: 400; font-size: .95rem; color: var(--color-text-strong); padding: 7px 0; cursor: pointer }
.fp label.fill-option input { width: 18px; height: 18px; margin-top: 3px }
.fp .fill-question input:not([type="checkbox"]):not([type="radio"]), .fp .fill-question textarea { max-width: 50%; min-height: 36px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--color-border-strong); border-radius: 0; background: transparent; box-shadow: none }
.fp .fill-question textarea { max-width: 100%; field-sizing: content; min-height: 2.4em; resize: none }
.fp .fill-question input:focus, .fp .fill-question textarea:focus { border-bottom: 2px solid var(--color-brand); padding-bottom: 5px }
.fp .fill-question input[type="date"] { max-width: 220px }
.fp .fill-question select { max-width: 320px }
.gf-fill-actions .gf-clear { margin-left: auto }
@media (max-width: 720px) { .fp .fill-question input:not([type="checkbox"]):not([type="radio"]) { max-width: 100% } }

/* Yanıtlar */
.summary-card { display: grid; gap: 10px }
.bar-list { display: grid; gap: 8px }
.bar-row { display: grid; grid-template-columns: minmax(120px, 280px) minmax(80px, 1fr) 40px 44px; gap: 10px; align-items: center; font-size: .9rem }
.bar-row b { text-align: right; color: var(--color-text-strong); font-variant-numeric: tabular-nums }
.bar-row small { color: var(--color-text-muted); font-variant-numeric: tabular-nums }
.bar { display: block; width: 100%; height: 12px }
.bar i { display: block; height: 100%; min-width: 2px; background: var(--color-brand); border-radius: 9999px }
.bar i[data-width="0"] { min-width: 0 }
.number-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0 }
.number-stats div { background: var(--color-bg-subtle); border-radius: 8px; padding: 10px 12px }
.number-stats dt { font-size: .78rem; color: var(--color-text-muted) }
.number-stats dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--color-text-strong); font-variant-numeric: tabular-nums }
.text-answers { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--color-border); border-radius: 8px; max-height: 480px; overflow-y: auto }
.text-answers li { padding: 9px 12px; border-bottom: 1px solid var(--color-border); white-space: pre-line; font-size: .92rem }
.text-answers li:last-child { border-bottom: 0 }
.text-answers small { display: block; font-size: .76rem; color: var(--color-text-muted); font-weight: 600 }
.table-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); box-shadow: var(--shadow-sm) }
.results-table { border-collapse: collapse; width: 100%; font-size: .86rem }
.results-table th, .results-table td { padding: 9px 12px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; min-width: 120px; max-width: 360px; white-space: pre-line }
.results-table th { position: sticky; top: 0; background: var(--color-bg-subtle); font-family: var(--font-display); color: var(--color-text-strong); white-space: normal }
.results-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--color-bg-subtle) 60%, transparent) }
.results-table .nowrap { white-space: nowrap }
.results-table td:last-child, .results-table th:last-child { min-width: 0 }
.pending-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px }
.pending-list li { padding: 6px 0; border-bottom: 1px solid var(--color-border); font-size: .9rem }
.pending-list strong { color: var(--color-text-strong); margin-right: 6px }

/* Takvim başlığındaki "Formlar" düğmesinde bekleyen form sayısı. */
.count-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 9999px; background: #fff; color: var(--color-brand); font-size: .74rem; font-weight: 800 }

@media (max-width: 720px) {
  .question-head { grid-template-columns: minmax(0, 1fr) }
  .bar-row { grid-template-columns: 1fr 40px 44px }
  .bar-row .bar { grid-column: 1 / -1; grid-row: 2 }
  .form-progress progress { width: 120px }
}
.question-preview-note { margin: -6px 0 0; font-size: .8rem; color: var(--color-text-muted) }
.gf-form-title b, .gf-title-input b { font-weight: 800 }

/* Özet grafikleri: pasta (tek seçim), sütun (çok seçim), yanıt verenler */
.pie-chart { display: flex; align-items: center; gap: 24px 40px; flex-wrap: wrap }
.pie-chart svg { width: 200px; height: 200px; flex: none }
.pie-chart path, .pie-chart circle { stroke: var(--color-surface); stroke-width: 2; stroke-linejoin: round }
.pie-chart path:hover, .pie-chart circle:hover { opacity: .85 }
.chart-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; flex: 1 1 240px; font-size: .9rem }
.chart-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 52px; gap: 10px; align-items: center; color: var(--color-text-strong) }
.chart-legend b { font-variant-numeric: tabular-nums; text-align: right }
.chart-legend small { color: var(--color-text-muted); font-variant-numeric: tabular-nums; text-align: right }
.swatch { width: 12px; height: 12px; border-radius: 3px }
.column-chart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; align-items: end; padding-top: 4px; border-bottom: 0 }
.column { display: grid; grid-template-rows: auto 180px auto; gap: 6px; min-width: 0; text-align: center }
.column b { font-size: .88rem; color: var(--color-text-strong); font-variant-numeric: tabular-nums; display: grid }
.column b small { font-weight: 400; color: var(--color-text-muted); font-size: .76rem }
.column-track { display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--color-border-strong) }
.column-track i { display: block; width: min(56px, 100%); min-height: 2px; background: #2a78d6; border-radius: 4px 4px 0 0 }
.column-track i[data-height="0"] { min-height: 0 }
.column:hover .column-track i { opacity: .85 }
.column-label { font-size: .8rem; line-height: 1.25; color: var(--color-text); overflow-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.responders li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline }
.responders li small { display: inline; flex: none }
@media (max-width: 720px) { .column { grid-template-rows: auto 140px auto } .column-chart { gap: 4px } .column-label { font-size: .72rem } }

/* Bölümler (düzenleyici ve doldurma) */
.section-card { gap: 8px }
.section-card.is-active::before { background: var(--color-text-strong) }
.section-tag { justify-self: start; display: inline-block; padding: 3px 10px; border-radius: 6px 6px 0 0; background: var(--color-brand); color: #fff; font-family: var(--font-display); font-size: .78rem; font-weight: 700; margin: -22px 0 4px -24px; border-radius: 8px 0 8px 0 }
.fp .section-card input.section-title-input { min-height: 44px; border: 0; border-bottom: 1px solid var(--color-border-strong); border-radius: 0; background: transparent; font-size: 1.3rem; font-weight: 600; color: var(--color-text-strong) }
.fp .section-card input.section-title-input:focus { border-bottom: 2px solid var(--color-brand); box-shadow: none }
.fill-section { display: grid; gap: 6px }
.fill-section h2 { margin: 0; font-size: 1.3rem; font-weight: 600 }
.fill-page { display: grid; gap: 12px }
.question-fab { display: grid; gap: 2px }
.fp-add-row { gap: 10px }

/* Sayfa ilerlemesi */
.page-progress { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--color-text-muted) }
.page-bar { width: 120px; height: 6px; border-radius: 9999px; background: var(--color-border); overflow: hidden }
.page-bar i { display: block; height: 100%; background: var(--color-brand); border-radius: 9999px }
.fill-end { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap }
.draft-status { color: var(--color-text-muted); font-size: .8rem }
.gf-fill-actions .gf-clear { margin-left: 0 }

/* Dosya sorusu */
.file-field { display: grid; gap: 8px; justify-items: start }
.file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100% }
.file-list:empty { display: none }
.file-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; font-size: .9rem }
.file-list li svg { fill: var(--color-text-muted); flex: none }
.file-list a { color: var(--color-text-strong); font-weight: 600; overflow-wrap: anywhere; flex: 1 }
.file-list a:hover { color: var(--color-brand); text-decoration: underline }
.file-list small { color: var(--color-text-muted); flex: none }
.file-list .icon-button { border: 0; width: 30px; height: 30px; flex: none }
.fp label.file-pick { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; cursor: pointer }
.file-pick svg { fill: currentColor }
.file-link { color: var(--color-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px }

/* Hatırlatma */
.remind-bar { margin: 8px 0 12px }
.pending-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.pending-list .reminded { display: block; font-size: .76rem }
.form-badges { display: flex; gap: 6px; flex-wrap: wrap }
.form-badge.is-reminded { background: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface)); color: var(--color-warning) }
.reminder-banner { margin-top: 16px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--color-warning) 45%, var(--color-surface)); border-left: 5px solid var(--color-warning); border-radius: 8px; background: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface)); color: var(--color-text-strong); font-size: .92rem }
.reminder-banner ul { margin: 6px 0 0; padding-left: 20px }
.reminder-banner a { color: var(--color-brand); font-weight: 700; text-decoration: underline; text-underline-offset: 3px }
.form-list .reminder-banner { margin-top: 0 }

/* Durum: taslak / yayında / kapalı */
.form-badge.is-draft { background: var(--color-bg-subtle); color: var(--color-text-strong); border: 1px dashed var(--color-border-strong) }
.status-strip { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); font-size: .88rem; color: var(--color-text-strong) }
.status-strip.is-draft { border-style: dashed; border-color: var(--color-border-strong) }
.status-strip .text-link { margin-left: auto }
.state-filter { margin-top: 12px; flex-wrap: wrap }
.state-filter small { font-weight: 400; opacity: .75; margin-left: 2px }

/* Soru koruma */
.question-lock { margin: -4px 0 0; font-size: .8rem; color: var(--color-text-muted) }
.fp .question-head select:disabled { opacity: .7; cursor: not-allowed }
.question-card.is-archived { gap: 4px; border-style: dashed; background: color-mix(in srgb, var(--color-bg-subtle) 70%, var(--color-surface)); box-shadow: none }
.question-card.is-archived .question-preview-title { color: var(--color-text-muted); text-decoration: line-through }
.question-card.is-archived .text-link { justify-self: start }
.summary-card.is-archived { border-style: dashed }

/* --- Drive (drive.html) -------------------------------------------------
   Google Drive düzeni: solda "Yeni" düğmesi ve bölümler, sağda beyaz ve
   yuvarlak köşeli içerik alanı; liste ya da ızgara, seçili öğe vurgulu.
   Formlar sayfasında olduğu gibi Google'ın mavisi yerine marka kırmızısı
   vurgu rengidir. İçerik alanı sayfa değil kendi içinde kayar. */
body.is-drive { background: #f8fafd; --gd-accent: var(--color-brand); --gd-sel: color-mix(in srgb, var(--color-brand) 13%, #fff); --gd-hover: #eef1f5; --gd-line: #e1e3e1; --gd-ink: #1f1f1f; --gd-soft: #444746 }
.gd { display: grid; grid-template-columns: 256px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: calc(100vh - 72px); height: calc(100dvh - 72px); color: var(--gd-ink); font-size: .875rem; line-height: 1.4 }
body.is-link .gd { grid-template-columns: minmax(0, 1fr) }
body.is-link .gd:has(.gd-side:not([hidden])) { grid-template-columns: 256px minmax(0, 1fr) }
.gd svg { fill: currentColor; flex: none }

.gd-side { display: flex; flex-direction: column; gap: 4px; padding: 8px 16px 16px 28px; overflow-y: auto }
.gd-new { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; height: 56px; padding: 0 20px 0 16px; margin: 8px 0 12px -12px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15); font-weight: 600; font-size: .875rem; color: var(--gd-ink); cursor: pointer; transition: box-shadow 150ms, background 150ms }
.gd-new:hover { background: #f5f7fa; box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15) }
.gd-new:disabled { opacity: .5; cursor: default; box-shadow: 0 1px 2px rgba(0,0,0,.2) }
.gd-new svg { width: 24px; height: 24px; color: var(--gd-accent) }
.gd-nav { display: grid; gap: 1px }
.gd-nav > a { display: flex; align-items: center; gap: 14px; height: 32px; padding: 0 12px 0 16px; border-radius: 16px; color: var(--gd-ink); font-weight: 500 }
.gd-nav > a:hover { background: var(--gd-hover) }
.gd-nav > a.is-active { background: var(--gd-sel); font-weight: 700 }
.gd-nav > a.is-drop { box-shadow: inset 0 0 0 2px var(--gd-accent) }
.gd-nav svg { width: 20px; height: 20px; color: var(--gd-soft) }
.gd-storage { margin: 16px 0 0 16px; padding-top: 12px; border-top: 1px solid var(--gd-line) }
.gd-storage-bar { height: 4px; border-radius: 4px; background: var(--gd-line); overflow: hidden }
.gd-storage-bar span { display: block; height: 100%; background: var(--gd-accent) }
.gd-storage p { margin: 8px 0 0; color: var(--gd-soft); font-size: .8rem }

.gd-main { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0 16px 16px 0; padding: 12px 16px 0 24px; background: #fff; border-radius: 16px }
body.is-link .gd-main { margin-left: 16px }
body.is-link .gd:has(.gd-side:not([hidden])) .gd-main { margin-left: 0 }
.gd-search { display: flex; align-items: center; gap: 12px; max-width: 720px; height: 48px; padding: 0 16px; border-radius: 24px; background: #e9eef6; transition: background 150ms, box-shadow 150ms }
.gd-search:focus-within { background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.1), 0 1px 3px 1px rgba(0,0,0,.12) }
.gd-search svg { width: 24px; height: 24px; color: var(--gd-soft) }
.gd-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: 1rem; outline: none }
.gd-search input:focus-visible { outline: none }
.gd-search .gd-icon { margin-right: -8px }
/* Arama süzgeçleri: Google Drive'daki çipler; seçili olan dolgulu. */
.gd-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 12px }
.gd-filter { height: 32px; max-width: 240px; padding: 0 28px 0 14px; border: 1px solid #747775; border-radius: 8px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23444746'/%3E%3C/svg%3E") no-repeat right 6px center / 18px; color: var(--gd-ink); font: 500 .875rem var(--font-body); appearance: none; cursor: pointer; text-overflow: ellipsis }
.gd-filter:hover { background-color: var(--gd-hover) }
.gd-filter.is-on { border-color: transparent; background-color: var(--gd-sel); font-weight: 700 }
.gd-filter-count { margin-left: auto; color: var(--gd-soft); font-size: .8rem }
/* Yükleyen olarak açılan klasörün üstündeki not. */
.gd-notice { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; padding: 12px 16px; border-radius: 8px; background: #e8f0fe; color: #174ea6 }
.gd-notice svg { width: 20px; height: 20px; flex: none; fill: currentColor }
.gd-notice p { margin: 0; flex: 1 }
.gd-notice .gd-text { height: 32px; margin: -6px -8px -6px 0; color: inherit }
/* Teslim durumu penceresi */
.gd-collect { width: min(720px, calc(100% - 32px)) !important }
.gd-collect-filter { justify-self: start }
.gd-segment.gd-collect-filter button { width: auto; padding: 0 14px; font: 500 .82rem var(--font-body) }
.gd-collect-list { max-height: 50vh; overflow-y: auto; border: 1px solid var(--gd-line); border-radius: 8px }
.gd-collect-row { display: grid; grid-template-columns: minmax(120px, 1.4fr) 60px 60px 80px minmax(130px, 1.4fr); gap: 8px; align-items: center; min-height: 36px; padding: 0 12px; border-top: 1px solid var(--gd-line); font-size: .85rem }
.gd-collect-row:first-child { border-top: 0 }
.gd-collect-row.is-head { position: sticky; top: 0; background: #f8fafd; color: var(--gd-soft); font-weight: 600; font-size: .78rem }
.gd-collect-row span:first-child { display: flex; align-items: center; gap: 8px; font-weight: 600 }
.gd-collect-row em { color: #b3261e; font-style: normal }
.gd-collect-icon { width: 18px; height: 18px; flex: none; fill: #b3261e }
.gd-collect-row.is-done .gd-collect-icon { fill: #188038 }
@media (max-width: 560px) { .gd-collect-row { grid-template-columns: 1fr 50px 50px; } .gd-collect-row span:nth-child(n+4) { display: none } }

.gd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; flex-wrap: wrap }
.gd-crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; flex-wrap: wrap }
.gd-crumb { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 4px 12px; border-radius: 16px; font: 400 1.375rem/1.4 var(--font-body); letter-spacing: 0; color: var(--gd-soft); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis }
a.gd-crumb:hover { background: var(--gd-hover); color: var(--gd-ink) }
.gd-crumb.is-last { color: var(--gd-ink) }
h1.gd-crumb.is-last:has(.gd-caret) { cursor: pointer }
h1.gd-crumb.is-last:has(.gd-caret):hover { background: var(--gd-hover) }
.gd-caret { width: 24px; height: 24px }
.gd-crumb-sep { width: 24px; height: 24px; color: var(--gd-soft) }
.gd-crumb.is-drop { background: var(--gd-sel); box-shadow: inset 0 0 0 2px var(--gd-accent) }
.gd-viewtools { display: flex; align-items: center; gap: 12px }
.gd-segment { display: inline-flex; border: 1px solid #747775; border-radius: 16px; overflow: hidden }
.gd-segment button { display: grid; place-items: center; width: 52px; height: 32px; border: 0; background: none; cursor: pointer; color: var(--gd-soft) }
.gd-segment button + button { border-left: 1px solid #747775 }
.gd-segment button[aria-pressed="true"] { background: var(--gd-sel); color: var(--gd-ink) }
.gd-segment svg { width: 18px; height: 18px }

.gd-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--gd-soft); cursor: pointer; flex: none }
.gd-icon:hover { background: rgba(31,31,31,.08) }
.gd-icon svg { width: 20px; height: 20px }
.gd-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid #747775; border-radius: 20px; background: #fff; color: var(--gd-accent); font-weight: 600; font-size: .875rem; cursor: pointer }
.gd-pill:hover { background: color-mix(in srgb, var(--gd-accent) 6%, #fff) }
.gd-pill svg { width: 18px; height: 18px }
.gd-solid { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 24px; border: 0; border-radius: 20px; background: var(--gd-accent); color: #fff; font-weight: 600; font-size: .875rem; cursor: pointer }
.gd-solid:hover { background: var(--color-brand-hover); box-shadow: 0 1px 2px rgba(0,0,0,.3) }
.gd-solid:disabled { opacity: .45; cursor: default; box-shadow: none }
.gd-solid svg { width: 18px; height: 18px }
.gd-text { height: 40px; padding: 0 12px; border: 0; border-radius: 20px; background: none; color: var(--gd-accent); font-weight: 600; font-size: .875rem; cursor: pointer }
.gd-text:hover { background: color-mix(in srgb, var(--gd-accent) 8%, #fff) }

.gd-selbar { display: flex; align-items: center; gap: 4px; min-height: 40px; margin-bottom: 8px; padding: 0 4px; border-radius: 24px; background: #e9eef6 }
.gd-selbar #sel-count { margin: 0 12px 0 4px; font-weight: 500 }
.gd-selbar-tools { display: flex; align-items: center; gap: 2px }
.gd-selbar .gd-icon { width: 36px; height: 36px }
.gd-main > .error { margin-bottom: 8px }

.gd-body { position: relative; flex: 1; overflow: auto; outline: none; padding-bottom: 48px; user-select: none; -webkit-user-select: none }
.gd-marquee { position: absolute; z-index: 3; border: 1px solid var(--gd-accent); background: color-mix(in srgb, var(--gd-accent) 12%, transparent); pointer-events: none }

/* Liste */
.gd-row { display: grid; grid-template-columns: minmax(200px, 1fr) 150px 170px 120px 48px; align-items: center; min-height: 48px; padding: 0 0 0 12px; border-bottom: 1px solid var(--gd-line) }
.has-location .gd-row { grid-template-columns: minmax(200px, 1fr) 140px 150px 110px 170px 48px }
.gd-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gd-soft) }
.gd-row-head { position: sticky; top: 0; z-index: 2; min-height: 48px; background: #fff }
.gd-row-head > * { color: var(--gd-ink); font-weight: 600; text-align: left }
.gd-row-head button { display: inline-flex; align-items: center; gap: 4px; justify-self: start; height: 32px; padding: 0 8px 0 0; border: 0; background: none; cursor: pointer; font-size: .875rem }
.gd-row-head button:hover { text-decoration: underline }
.gd-sort { width: 18px; height: 18px }
.gd-sort.is-down { transform: rotate(180deg) }
.gd-item { cursor: default; outline: none }
.gd-row.gd-item:hover { background: var(--gd-hover) }
.gd-item.is-selected, .gd-row.gd-item.is-selected:hover, .gd-chip.is-selected:hover, .gd-card.is-selected:hover { background: var(--gd-sel) }
.gd-item:focus-visible { box-shadow: inset 0 0 0 2px var(--gd-accent) }
.gd-item.is-dragging { opacity: .45 }
.gd-item.is-drop { box-shadow: inset 0 0 0 2px var(--gd-accent); background: var(--gd-sel) }
.gd-col-name { display: flex; align-items: center; gap: 14px; color: var(--gd-ink) !important; font-weight: 500 }
.gd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.gd-col-date small { color: var(--gd-soft); font-size: .8rem }
.gd-col-loc { display: flex; align-items: center; gap: 8px }
.gd-loc-icon { width: 18px; height: 18px; color: var(--gd-soft); vertical-align: -4px }
.gd-col-more { display: flex; justify-content: center; overflow: visible !important }
.gd-col-more .gd-icon { width: 32px; height: 32px; opacity: 0 }
.gd-item:hover .gd-col-more .gd-icon, .gd-item.is-selected .gd-col-more .gd-icon, .gd-col-more .gd-icon:focus-visible { opacity: 1 }
.gd-ficon { width: 20px; height: 20px }
.gd-ficon.is-folder { color: var(--gd-soft) }
.gd-badge { display: inline-flex; color: var(--gd-soft) }
.gd-badge svg { width: 16px; height: 16px }
.gd-badge.is-star { color: #f4b400 }

/* Izgara */
.gd-group { margin: 12px 0; font: 600 .875rem/1.4 var(--font-body); letter-spacing: 0; color: var(--gd-ink) }
.gd-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; margin-bottom: 16px }
.gd-chip { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 4px 0 16px; border-radius: 12px; background: #f0f4f9; font-weight: 500 }
.gd-chip:hover { background: #e1e5ea }
.gd-chip .gd-name { flex: 1 }
.gd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 16px }
.gd-card { display: grid; gap: 4px; padding: 4px 4px 12px; border-radius: 12px; background: #f0f4f9 }
.gd-card:hover { background: #e1e5ea }
.gd-card-top { display: flex; align-items: center; gap: 12px; height: 44px; padding-left: 12px; font-weight: 500; min-width: 0 }
.gd-card-top .gd-name { flex: 1 }
.gd-thumb { display: grid; place-items: center; aspect-ratio: 1.25; margin: 0 8px; border-radius: 8px; background: #fff; overflow: hidden }
.gd-thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none }
.gd-thumb-icon { width: 64px; height: 64px }
.gd-thumb-icon.is-folder { color: var(--gd-soft) }
.gd-card-meta { margin: 4px 12px 0; color: var(--gd-soft); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

.gd-empty { display: grid; justify-items: center; gap: 4px; padding: 72px 16px; text-align: center; color: var(--gd-soft) }
.gd-empty h2 { margin: 12px 0 0; font: 400 1.375rem/1.3 var(--font-body); letter-spacing: 0; color: var(--gd-ink) }
.gd-empty p { margin: 0 }
.gd-empty-icon { width: 96px; height: 96px; color: #c4c7c5 }

/* Bilgisayardan dosya bırakma katmanı */
.gd-drop { position: absolute; inset: 0; z-index: 6; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 32px; border: 2px solid var(--gd-accent); border-radius: 16px; background: color-mix(in srgb, var(--gd-accent) 7%, transparent); pointer-events: none }
.gd-drop p { margin: 0; padding: 12px 20px; border-radius: 24px; background: var(--gd-accent); color: #fff; font-weight: 600; box-shadow: var(--shadow-md) }
.gd-ghost { position: fixed; top: -1000px; left: 0; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 8px; background: var(--gd-accent); color: #fff; font: 600 .875rem var(--font-body) }
.gd-ghost svg { width: 20px; height: 20px; fill: #fff }

/* Menü */
.gd-menu { position: fixed; z-index: 60; min-width: 248px; max-width: 320px; padding: 8px 0; border-radius: 8px; background: #fff; box-shadow: 0 2px 6px 2px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.3); font-size: .875rem; color: var(--gd-ink) }
.gd-menu button { display: flex; align-items: center; gap: 16px; width: 100%; height: 36px; padding: 0 20px 0 16px; border: 0; background: none; text-align: left; cursor: pointer; outline: none }
.gd-menu button:hover, .gd-menu button:focus-visible { background: var(--gd-hover) }
.gd-menu svg { width: 20px; height: 20px; fill: var(--gd-soft) }
.gd-menu hr { margin: 8px 0; border: 0; border-top: 1px solid var(--gd-line) }

/* Pencereler (Google'ın 28 px köşeli pencereleri) */
dialog.gd-dialog { width: min(480px, calc(100% - 32px)); padding: 24px; border: 0; border-radius: 28px; background: #fff; color: var(--gd-ink); font-size: .875rem; box-shadow: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3) }
dialog.gd-dialog::backdrop { background: rgba(0,0,0,.4) }
dialog.gd-dialog form { display: grid; gap: 16px }
dialog.gd-dialog h2 { display: flex; align-items: center; gap: 12px; margin: 0; font: 400 1.5rem/1.3 var(--font-body); letter-spacing: 0; color: var(--gd-ink); overflow-wrap: anywhere }
dialog.gd-dialog h2 svg { width: 24px; height: 24px; fill: currentColor; flex: none }
dialog.gd-dialog h3 { margin: 4px 0 -4px; font: 600 1rem/1.4 var(--font-body); letter-spacing: 0 }
dialog.gd-dialog input { width: 100%; min-height: 48px; padding: 8px 14px; border: 1px solid #747775; border-radius: 4px; font-size: 1rem }
dialog.gd-dialog input:focus { border-color: var(--gd-accent); box-shadow: inset 0 0 0 1px var(--gd-accent); outline: none }
dialog.gd-dialog p { margin: 0 }
dialog.gd-dialog svg { fill: currentColor }
.gd-dialog-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px }
.gd-share { width: min(560px, calc(100% - 32px)) !important }
.gd-access { display: flex; align-items: center; gap: 14px }
.gd-access-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #e3e3e3; color: var(--gd-soft); flex: none }
.gd-access-icon.is-open { background: color-mix(in srgb, var(--color-success) 18%, #fff); color: var(--color-success) }
.gd-access-icon svg { width: 20px; height: 20px }
.gd-access-text { display: grid; gap: 2px; flex: 1; min-width: 0 }
.gd-access-text small { color: var(--gd-soft); font-size: .8rem }
.gd-access select { justify-self: start; height: 32px; padding: 0 8px; margin-left: -8px; border: 0; border-radius: 4px; background: none; font-weight: 600; font-size: .875rem; cursor: pointer }
.gd-access select:hover { background: var(--gd-hover) }
.gd-share-actions { justify-content: space-between; margin-top: 8px }
.gd-move { width: min(520px, calc(100% - 32px)) !important }
.gd-move-now { color: var(--gd-soft) }
.gd-move-now svg { width: 18px; height: 18px; vertical-align: -4px }
.gd-move-head { display: flex; align-items: center; gap: 8px; min-height: 40px; border-bottom: 1px solid var(--gd-line); padding-bottom: 8px }
.gd-move-head strong { font-size: 1rem; font-weight: 600 }
.gd-move-list { list-style: none; margin: 0; padding: 0; height: 280px; overflow-y: auto }
.gd-move-list li { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 4px 0 12px; border-radius: 8px; cursor: pointer }
.gd-move-list li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.gd-move-list li:hover { background: var(--gd-hover) }
.gd-move-list li.is-picked { background: var(--gd-sel) }
.gd-move-list li.gd-move-empty { justify-content: center; height: 120px; color: var(--gd-soft); cursor: default; background: none }
.gd-move-list .gd-icon { width: 32px; height: 32px }
.gd-move-list .gd-ficon { color: var(--gd-soft) }

/* Önizleme */
body.is-previewing { overflow: hidden }
.gd-preview { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: 64px minmax(0, 1fr); background: rgba(0,0,0,.9); color: #fff }
.gd-preview svg { fill: currentColor }
.gd-preview-bar { display: flex; align-items: center; gap: 12px; padding: 0 12px; background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0)) }
.gd-preview-bar .gd-icon { color: #fff }
.gd-preview-bar .gd-icon:hover { background: rgba(255,255,255,.14) }
.gd-preview-bar strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 1rem }
.gd-preview-tools { display: flex; gap: 4px }
#preview-icon { display: inline-flex }
#preview-icon .gd-ficon.is-folder { color: #fff }
.gd-preview-stage { display: grid; place-items: center; min-height: 0; padding: 0 72px 24px; overflow: auto }
.gd-preview-stage img { max-width: 100%; max-height: calc(100vh - 100px); object-fit: contain; box-shadow: 0 8px 30px rgba(0,0,0,.5) }
.gd-preview-stage iframe { width: min(1000px, 100%); height: calc(100vh - 96px); border: 0; background: #fff }
.gd-preview-stage video { max-width: 100%; max-height: calc(100vh - 100px) }
.gd-preview-nav { position: fixed; top: 50%; z-index: 81; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; cursor: pointer }
.gd-preview-nav:hover { background: rgba(0,0,0,.8) }
.gd-preview-nav svg { width: 28px; height: 28px }
.gd-preview-nav.is-prev { left: 12px }
.gd-preview-nav.is-next { right: 12px }
.gd-noprev { display: grid; justify-items: center; gap: 16px; padding: 40px 48px; border-radius: 16px; background: #3c4043; color: #fff; text-align: center }
.gd-noprev p { margin: 0 }
.gd-noprev-icon { width: 72px; height: 72px }
.gd-audio { display: grid; justify-items: center; gap: 24px }
.gd-text-prev { width: min(900px, 100%); max-height: calc(100vh - 110px); margin: 0; padding: 24px 28px; overflow: auto; background: #fff; color: var(--gd-ink); font: .85rem/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text }

/* Bağlantı bir dosyaysa: tek dosya sayfası */
.gd-filepage { padding: 8px 0 0 }
.gd-filecard { display: grid; gap: 16px }
.gd-filecard-head { display: flex; align-items: center; gap: 16px }
.gd-filecard-head .gd-ficon { width: 40px; height: 40px }
.gd-filecard-head h2 { margin: 0; font: 400 1.5rem/1.3 var(--font-body); letter-spacing: 0; color: var(--gd-ink); overflow-wrap: anywhere }
.gd-filecard-head p { margin: 2px 0 0; color: var(--gd-soft) }
.gd-filecard-tools { display: flex; gap: 8px; flex-wrap: wrap }
.gd-filecard-stage { display: grid; place-items: center; min-height: 360px; padding: 16px; border-radius: 12px; background: #3c4043; user-select: text }
.gd-filecard-stage img { max-width: 100%; max-height: 70vh; object-fit: contain }
.gd-filecard-stage iframe { width: 100%; height: 75vh; border: 0; background: #fff }
.gd-filecard-stage video { max-width: 100%; max-height: 70vh }
.gd-filecard-stage .gd-text-prev { max-height: 70vh }

/* Yüklemeler ve bildirim */
.gd-uploads { position: fixed; right: 24px; bottom: 0; z-index: 70; width: min(360px, calc(100% - 32px)); border-radius: 16px 16px 0 0; background: #fff; box-shadow: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3); overflow: hidden; font-size: .875rem; color: #1f1f1f }
.gd-uploads svg { fill: currentColor }
.gd-uploads-head { display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 8px 0 20px; background: #f0f4f9 }
.gd-uploads-head strong { flex: 1; font-weight: 600; font-size: .95rem }
.gd-uploads.is-collapsed #uploads-list { display: none }
.gd-uploads.is-collapsed #uploads-toggle svg { transform: rotate(180deg) }
#uploads-list { list-style: none; margin: 0; padding: 4px 0; max-height: 260px; overflow-y: auto }
#uploads-list li { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 16px 0 20px }
.gd-up-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.gd-up-state { display: grid; place-items: center; width: 24px; height: 24px }
.gd-ring { width: 24px; height: 24px; transform: rotate(-90deg) }
.gd-ring circle { fill: none !important; stroke: #e1e3e1; stroke-width: 4 }
.gd-ring .gd-ring-fill { stroke: var(--color-brand); stroke-dasharray: 94.2; stroke-dashoffset: 94.2; transition: stroke-dashoffset 150ms }
.gd-up-ok { width: 22px; height: 22px; fill: var(--color-success) !important }
.gd-up-err { width: 22px; height: 22px; fill: var(--color-danger) !important }
.gd-toast { position: fixed; left: 24px; bottom: 24px; z-index: 90; display: flex; align-items: center; gap: 16px; max-width: min(560px, calc(100% - 48px)); min-height: 48px; padding: 8px 8px 8px 16px; border-radius: 4px; background: #313033; color: #f2f2f2; font-size: .875rem; box-shadow: 0 2px 6px 2px rgba(0,0,0,.15) }
.gd-toast.is-error { background: #601410 }
.gd-toast button { height: 36px; padding: 0 12px; border: 0; border-radius: 4px; background: none; color: #ffb4ab; font-weight: 700; cursor: pointer }
.gd-toast button:hover { background: rgba(255,255,255,.08) }

@media (max-width: 900px) {
  .gd, body.is-link .gd:has(.gd-side:not([hidden])) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) }
  body.is-link .gd { grid-template-rows: minmax(0, 1fr) }
  .gd-side { flex-direction: row; align-items: center; gap: 8px; padding: 8px 16px; overflow-x: auto; overflow-y: hidden }
  .gd-new { height: 44px; margin: 0; flex: none }
  .gd-nav { display: flex; gap: 4px }
  .gd-nav > a { white-space: nowrap; padding: 0 12px }
  .gd-storage { display: none }
  .gd-main, body.is-link .gd-main, body.is-link .gd:has(.gd-side:not([hidden])) .gd-main { margin: 0 8px 8px; padding: 8px 12px 0 }
  .gd-row, .has-location .gd-row { grid-template-columns: minmax(0, 1fr) 96px 44px }
  .gd-col-owner, .gd-col-size, .gd-col-loc { display: none !important }
  .gd-col-more .gd-icon { opacity: 1 }
  .gd-crumb { font-size: 1.125rem; max-width: 200px }
  .gd-preview-stage { padding: 0 8px 16px }
  .gd-preview-nav { display: none }
  .gd-toast { left: 16px; bottom: 16px }
  .gd-uploads { right: 16px }
}

/* Drive: kenar çubuğundaki klasör ağacı ve kişi paylaşımı */
.gd-nav-row { position: relative; display: flex; align-items: center }
.gd-nav-row > a { flex: 1; display: flex; align-items: center; gap: 14px; height: 32px; padding: 0 12px 0 16px; border-radius: 16px; color: var(--gd-ink); font-weight: 500 }
.gd-nav-row > a:hover { background: var(--gd-hover) }
.gd-nav-row > a.is-active { background: var(--gd-sel); font-weight: 700 }
.gd-nav-row > a.is-drop { box-shadow: inset 0 0 0 2px var(--gd-accent) }
.gd-nav-row > .gd-tree-toggle { position: absolute; left: -24px; z-index: 1 }
.gd-tree-toggle { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--gd-soft); cursor: pointer; flex: none }
.gd-tree-toggle:hover { background: rgba(31,31,31,.08) }
.gd-tree-toggle svg { width: 20px; height: 20px; transition: transform 120ms }
.gd-tree-toggle[aria-expanded="true"] svg, [aria-expanded="true"] > .gd-tree-row > .gd-tree-toggle svg { transform: rotate(90deg) }
.gd-tree, .gd-tree ul { list-style: none; margin: 0; padding: 0 }
.gd-tree { margin-bottom: 4px }
.gd-tree-row { display: flex; align-items: center; height: 32px; border-radius: 16px }
.gd-tree-row:hover { background: var(--gd-hover) }
.gd-tree-row.is-active { background: var(--gd-sel); font-weight: 700 }
.gd-tree-row.is-drop { box-shadow: inset 0 0 0 2px var(--gd-accent); background: var(--gd-sel) }
.gd-tree-row a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 100%; padding-right: 12px; color: var(--gd-ink) }
.gd-tree-row a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.gd-tree-row a svg { width: 18px; height: 18px; color: var(--gd-soft) }
.gd-tree-space { width: 24px; flex: none }
.gd-tree-empty { padding: 4px 0 4px 44px; color: var(--gd-soft); font-size: .8rem }

.gd-people-add { position: relative; display: flex; gap: 8px }
.gd-people-add input { flex: 1 }
.gd-people-add select { height: 48px; padding: 0 10px; border: 1px solid #747775; border-radius: 4px; background: #fff; font-size: .875rem }
.gd-suggest { position: absolute; top: 52px; left: 0; right: 0; z-index: 5; list-style: none; margin: 0; padding: 8px 0; max-height: 280px; overflow-y: auto; border-radius: 8px; background: #fff; box-shadow: 0 2px 6px 2px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.3) }
.gd-suggest li[data-add] { display: flex; align-items: center; gap: 12px; padding: 6px 16px; cursor: pointer; outline: none }
.gd-suggest li[data-add]:hover, .gd-suggest li[data-add]:focus { background: var(--gd-hover) }
.gd-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 240px; overflow-y: auto }
.gd-people li { display: flex; align-items: center; gap: 12px; min-height: 48px }
.gd-people select { height: 32px; padding: 0 6px; border: 0; border-radius: 4px; background: none; font-size: .875rem; cursor: pointer }
.gd-people select:hover { background: var(--gd-hover) }
.gd-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--gd-accent) 18%, #fff); color: var(--gd-accent); font-weight: 700; flex: none }
.gd-person { display: grid; flex: 1; min-width: 0 }
.gd-person b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.gd-person small { color: var(--gd-soft); font-size: .78rem }
.gd-person-role { padding-right: 8px; color: var(--gd-soft) }
.gd-people-note { padding: 8px 16px; color: var(--gd-soft) }
@media (max-width: 900px) { .gd-tree, .gd-nav-row > .gd-tree-toggle { display: none } .gd-nav-row > a { white-space: nowrap } }
/* Seçim çubuğu boşken de yerini korur: seçim yapılınca liste kaymaz (Google'daki gibi). */
.gd-selbar[hidden] { display: flex !important; visibility: hidden }
/* Takvimin genel dialog kuralları (tam genişlik alanlar) Drive pencerelerinde geçersiz. */
dialog.gd-dialog select { width: auto; min-height: 0 }
dialog.gd-dialog .gd-people-add input { flex: 1 1 auto; width: auto; min-width: 0 }
dialog.gd-dialog .gd-people-add select { height: 48px; min-height: 48px }
/* Toplu paylaşım paneli ve "Yükleyen" açıklaması */
.gd-bulk-toggle { display: block; margin: 4px 0 0 -12px }
.gd-bulk { display: grid; gap: 10px; margin-top: 4px; padding: 12px 16px; border: 1px solid var(--gd-line); border-radius: 8px; background: #f8fafd }
.gd-bulk .gd-radios { display: grid; gap: 6px }
.gd-bulk-cities { display: grid; gap: 6px }
.gd-bulk-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap }
dialog.gd-dialog .gd-bulk-tools input { flex: 1 1 140px; width: auto; min-width: 0; min-height: 36px; height: 36px; font-size: .875rem }
.gd-bulk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 2px 12px; max-height: 180px; overflow-y: auto; padding: 4px; border-radius: 4px; background: #fff }
.gd-bulk-list label { display: flex; align-items: center; gap: 6px; min-height: 28px; cursor: pointer }
dialog.gd-dialog .gd-bulk-list input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--gd-accent) }
.gd-bulk-list small, #bulk-count, .gd-bulk-note { color: var(--gd-soft); font-size: .78rem }
.gd-bulk-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap }
dialog.gd-dialog .gd-bulk-actions select { height: 40px; min-height: 40px; margin-right: auto; padding: 0 10px; border: 1px solid #747775; border-radius: 4px; background: #fff; font-size: .875rem }
.gd-bulk-actions .gd-text:disabled { opacity: .45; cursor: default; background: none }
.gd-role-help { margin: 4px 0 0; padding: 8px 12px; border-radius: 8px; background: #e8f0fe; color: #174ea6; font-size: .8rem }

/* Drive: Word ve Excel önizlemesi (office.js). Word beyaz A4 sayfası olarak
   koyu zeminde kayar; Excel ızgarası Google E-Tablolar'daki gibi başlık
   satırı / sütunu sabit, altta sayfa sekmeleri. */
.gd-office { width: min(1200px, 100%); height: calc(100vh - 96px); display: flex; flex-direction: column; color: #1f1f1f; user-select: text; -webkit-user-select: text }
.gd-filecard-stage .gd-office { height: 75vh }
.gd-office-wait { color: #e8eaed; font-size: 1rem }
.gd-filecard-stage .gd-office-wait { color: #fff }
.gd-doc { flex: 1; overflow: auto; padding: 8px 0 32px }
.gd-doc-page { box-sizing: border-box; width: min(794px, calc(100% - 16px)); min-height: 1123px; margin: 0 auto; padding: 72px 76px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); font: 11pt/1.4 Calibri, Carlito, "Segoe UI", Arial, sans-serif; color: #000; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4 }
.gd-doc-page p, .gd-doc-page h1, .gd-doc-page h2, .gd-doc-page h3, .gd-doc-page h4, .gd-doc-page h5, .gd-doc-page h6 { margin: 0 0 8px; letter-spacing: 0; text-wrap: wrap; color: inherit; font-family: inherit }
.gd-doc-page h1 { font-size: 20pt; font-weight: 400; color: #2f5496 } .gd-doc-page h2 { font-size: 16pt; font-weight: 400; color: #2f5496 } .gd-doc-page h3 { font-size: 13pt; font-weight: 400; color: #1f3763 }
.gd-doc-page h4, .gd-doc-page h5, .gd-doc-page h6 { font-size: 11pt; font-weight: 700; color: #2f5496 }
.gd-doc-li { position: relative; margin-bottom: 2px !important }
.gd-doc-marker { display: inline-block; min-width: 22px; margin-left: -22px }
.gd-doc-page img { max-width: 100%; height: auto; vertical-align: middle }
.gd-doc-page a { color: #0563c1; text-decoration: underline }
.gd-doc-table { width: 100%; margin: 4px 0 10px; border-collapse: collapse; white-space: normal }
.gd-doc-table td { padding: 4px 7px; border: 1px solid #000; vertical-align: top }
.gd-doc-table td p { margin: 0 }
.gd-doc-break { margin: 24px -76px; border: 0; border-top: 8px solid #3c4043 }

.gd-office.is-sheet { background: #fff; border-radius: 4px; overflow: hidden }
.gd-sheet { flex: 1; min-height: 0; display: flex; flex-direction: column }
.gd-sheet-grid { flex: 1; overflow: auto }
.gd-sheet-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; font: 13px/1.3 Arial, "Segoe UI", sans-serif; color: #000 }
.gd-sheet-table td { height: 21px; padding: 2px 4px; border-right: 1px solid #e2e3e3; border-bottom: 1px solid #e2e3e3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom }
.gd-sheet-table td.is-number { text-align: right }
.gd-sheet-table th { position: sticky; z-index: 1; padding: 2px 4px; border-right: 1px solid #c7c7c7; border-bottom: 1px solid #c7c7c7; background: #f8f9fa; color: #5f6368; font-weight: 400; font-size: 11px; text-align: center }
.gd-sheet-table thead th { top: 0; z-index: 2 }
.gd-sheet-table tbody th { left: 0 }
.gd-sheet-table thead th.gd-sheet-corner { left: 0; z-index: 3 }
.gd-sheet-tabs { display: flex; gap: 2px; padding: 0 8px; overflow-x: auto; border-top: 1px solid #dadce0; background: #f8f9fa; flex: none }
.gd-sheet-tabs button { height: 36px; padding: 0 16px; border: 0; background: none; color: #444746; font: 500 .85rem var(--font-body); white-space: nowrap; cursor: pointer }
.gd-sheet-tabs button:hover { background: #e8eaed }
.gd-sheet-tabs button[aria-pressed="true"] { background: #fff; color: #188038; box-shadow: inset 0 -3px 0 #188038 }
.gd-sheet-more { margin: 12px; color: #5f6368 }
@media (max-width: 900px) { .gd-doc-page { padding: 28px 22px; min-height: 0 } .gd-doc-break { margin: 16px -22px } }
.gd-office.is-doc { width: 100% }
.gd-doc-page h1.gd-doc-title { font-size: 26pt; font-weight: 300; color: #000; margin-bottom: 12px }
.gd-radios { display: grid; gap: 4px }
.gd-radios label { display: flex; align-items: center; gap: 12px; min-height: 40px; cursor: pointer; font-size: .9rem }
dialog.gd-dialog .gd-radios input { width: 20px; min-height: 0; height: 20px; margin: 0; accent-color: var(--gd-accent) }

/* Drive: Ayrıntılar paneli (ⓘ) — Google Drive'daki sağ panel */
.gd-split { flex: 1; min-height: 0; display: flex; gap: 16px }
.gd-split > .gd-body { flex: 1 1 auto; min-width: 0 }
#details-toggle[aria-pressed="true"] { background: var(--gd-sel); color: var(--gd-ink) }
.gd-details { width: 340px; flex: none; overflow-y: auto; padding: 4px 4px 24px 16px; border-left: 1px solid var(--gd-line); color: var(--gd-ink) }
.gd-details-head { display: flex; align-items: center; gap: 12px; min-height: 48px }
.gd-details-head h2 { flex: 1; min-width: 0; margin: 0; font: 400 1.05rem/1.3 var(--font-body); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.gd-details-head .gd-ficon { width: 22px; height: 22px }
.gd-details-thumb { display: grid; place-items: center; width: 100%; height: 210px; margin: 8px 0 20px; padding: 0; border: 0; border-radius: 12px; background: #f0f4f9; overflow: hidden; cursor: pointer; position: relative }
.gd-details-thumb img { width: 100%; height: 100%; object-fit: contain }
.gd-details-thumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none }
.gd-details-thumb iframe { width: 100%; height: 100%; border: 0; background: #fff; pointer-events: none }
.gd-details-thumb pre { align-self: start; justify-self: stretch; margin: 0; padding: 12px 14px; height: 100%; overflow: hidden; background: #fff; text-align: left; font: .7rem/1.4 ui-monospace, Consolas, monospace; white-space: pre-wrap; color: #333 }
.gd-details-thumb.is-icon { cursor: default }
.gd-details-big { width: 72px; height: 72px; color: #c4c7c5 }
.gd-details-big.is-folder { color: var(--gd-soft) }
/* Word / Excel küçük görüntüsü: tam boy çizilip ölçeklenir, tıklama önizlemeye gider. */
.gd-details-mini { position: absolute; top: 6px; left: 50%; width: 1000px; height: 700px; transform: translateX(-50%) scale(.31); transform-origin: top center; pointer-events: none }
.gd-details-mini .gd-office { width: 1000px; height: 700px }
.gd-details-mini .gd-doc { overflow: hidden; padding: 0 }
.gd-details-mini .gd-doc-page { min-height: 0; box-shadow: none }
.gd-details-mini .gd-sheet-grid { overflow: hidden }
.gd-details-mini .gd-sheet-tabs { display: none }
.gd-details section { padding: 16px 0; border-top: 1px solid var(--gd-line) }
.gd-details h3 { margin: 0 0 12px; font: 600 .95rem/1.3 var(--font-body); letter-spacing: 0; color: var(--gd-ink) }
.gd-details-access { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--gd-soft) }
.gd-details-list { display: grid; gap: 14px; margin: 0 }
.gd-details-list dt { font-size: .78rem; color: var(--gd-soft) }
.gd-details-list dd { margin: 2px 0 0; overflow-wrap: anywhere }
.gd-details-list dt + dd { margin-top: -12px }
.gd-details-place { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 6px; border: 1px solid #747775; border-radius: 8px; color: var(--gd-ink) }
.gd-details-place:hover { background: var(--gd-hover) }
.gd-details-empty { display: grid; justify-items: center; gap: 12px; padding: 48px 12px; text-align: center; color: var(--gd-soft) }
.gd-details-empty p { margin: 0 }
@media (max-width: 1100px) { .gd-details { position: fixed; top: 72px; right: 0; bottom: 0; z-index: 30; width: min(360px, 100%); padding: 8px 16px 24px; background: #fff; border-left: 0; box-shadow: -4px 0 16px rgba(0,0,0,.15) } }

/* Yükleme satırı: gönderilirken üstüne gelince iptal, hata ya da iptalde yeniden dene */
#uploads-list .gd-up-act { width: 32px; height: 32px; margin-right: -8px }
#uploads-list li:not(.is-failed):not(.is-cancelled) .gd-up-act { display: none }
#uploads-list li:not(.is-failed):not(.is-cancelled):hover .gd-up-act:not([hidden]) { display: inline-grid }
#uploads-list li:not(.is-failed):not(.is-cancelled):hover:has(.gd-up-act:not([hidden])) .gd-up-state { display: none }
#uploads-list li.is-cancelled .gd-up-name { color: #5f6368 }
#uploads-list .gd-up-state small { color: #5f6368; white-space: nowrap; font-size: .75rem }
#uploads-list li .gd-up-state:has(small) { width: auto }

/* Paylaş: bağlantı bitiş tarihi ve yenileme */
.gd-link-extra { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-left: 50px }
.gd-expiry { display: grid; gap: 4px; font-size: .82rem; color: var(--gd-soft) }
.gd-expiry span { font-weight: 600; color: var(--gd-ink) }
dialog.gd-dialog .gd-expiry input { width: 180px; min-height: 40px; font-size: .9rem }
.gd-expiry small { font-size: .75rem }

/* Sürüm geçmişi */
.gd-versions { width: min(600px, calc(100% - 32px)) !important }
.gd-versions-note { color: var(--gd-soft); font-size: .85rem }
.gd-versions-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 360px; overflow-y: auto }
.gd-versions-list li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 4px; border-radius: 8px }
.gd-versions-list li:hover { background: var(--gd-hover) }
.gd-versions-list em { font-style: normal; font-weight: 700; color: var(--color-success) }
.gd-version-icon { display: inline-flex }
.gd-version-tools { display: flex; align-items: center; gap: 2px; flex: none }
.gd-version-tools .gd-icon { width: 36px; height: 36px }

/* Ayrıntılar paneli: sekmeler ve Etkinlik */
.gd-details-tabs { display: flex; border-bottom: 1px solid var(--gd-line); margin: 0 0 12px }
.gd-details-tabs button { flex: 1; position: relative; height: 40px; border: 0; background: none; color: var(--gd-soft); font: 600 .85rem var(--font-body); cursor: pointer }
.gd-details-tabs button:hover { color: var(--gd-ink); background: var(--gd-hover) }
.gd-details-tabs button[aria-selected="true"] { color: var(--gd-accent) }
.gd-details-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--gd-accent) }
.gd-activity h4 { margin: 14px 0 6px; font: 600 .8rem var(--font-body); color: var(--gd-soft) }
.gd-activity h4:first-child { margin-top: 4px }
.gd-activity-entry { display: flex; gap: 12px; padding: 8px 0 }
.gd-activity-entry > div { min-width: 0; display: grid; gap: 4px }
.gd-activity-entry p { margin: 0; overflow-wrap: anywhere; line-height: 1.4 }
.gd-activity-entry small { color: var(--gd-soft); font-size: .75rem }
.gd-avatar.is-link { background: #e8eaed; color: var(--gd-soft) }
.gd-avatar svg { width: 16px; height: 16px; fill: currentColor }
.gd-activity-item { display: inline-flex; align-items: center; gap: 8px; justify-self: start; max-width: 100%; padding: 4px 10px 4px 6px; border: 1px solid var(--gd-line); border-radius: 8px; color: var(--gd-ink); font-size: .82rem }
.gd-activity-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.gd-activity-item .gd-ficon { width: 16px; height: 16px }
a.gd-activity-item:hover { background: var(--gd-hover) }
.gd-activity-item.is-gone span { text-decoration: line-through; color: var(--gd-soft) }
.gd-activity > .gd-text { margin-top: 8px }