/** Katmanlı bileşenler: kip, çekmece, ipucu, bildirim, sekme, akordiyon. */

/* ── Kip ────────────────────────────────────────────────────────────────
   Yerel <dialog>: odak tuzağı, Esc ve inert arka plan tarayıcıdan gelir. */
.c-modal {
  width: min(560px, calc(100vw - var(--sp-12)));
  max-height: min(85vh, 800px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  color: var(--ink-2);
  box-shadow: var(--sh-md);
  overflow: hidden;
}
.c-modal::backdrop { background: rgba(6, 8, 10, 0.66); backdrop-filter: blur(2px); }
.c-modal__inner { display: flex; flex-direction: column; max-height: inherit; }
.c-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-8);
  border-bottom: 1px solid var(--line);
}
.c-modal__title { font-size: var(--fs-xl); }
.c-modal__body { padding: var(--sp-8); overflow-y: auto; }
.c-modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-8);
  border-top: 1px solid var(--line);
  background: var(--card-2);
}
.c-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  margin: calc(var(--sp-3) * -1);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--mute);
  cursor: pointer;
}
.c-close:hover { background: var(--card-2); color: var(--ink); }

/* Mobilde kip alttan çıkan sayfa olur — başparmakla ulaşılabilir. */
@media (max-width: 599px) {
  .c-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 90vh;
    margin: auto 0 0;
    border-radius: var(--r-card) var(--r-card) 0 0;
    border-bottom: 0;
  }
}

/* ── Çekmece ──────────────────────────────────────────────────────────── */
.c-drawer {
  width: min(360px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-inline-start: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-2);
  box-shadow: var(--sh-md);
}
.c-drawer::backdrop { background: rgba(6, 8, 10, 0.66); }
.c-drawer__inner { display: flex; flex-direction: column; height: 100%; }
.c-drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-7); }

/* ── İpucu ────────────────────────────────────────────────────────────── */
.c-tooltip { position: relative; display: inline-flex; }
.c-tooltip__bubble {
  position: absolute;
  bottom: calc(100% + var(--sp-3));
  left: 50%;
  translate: -50% 0;
  z-index: var(--z-tooltip);
  width: max-content;
  max-width: min(260px, 80vw);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-sm);
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.c-tooltip:hover .c-tooltip__bubble,
.c-tooltip:focus-within .c-tooltip__bubble { opacity: 1; }

/* ── Bildirim ─────────────────────────────────────────────────────────── */
.c-toast-region {
  position: fixed;
  inset: auto var(--sp-7) var(--sp-7) var(--sp-7);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sp-3);
  pointer-events: none;
}
@media (min-width: 768px) {
  .c-toast-region { inset: auto var(--sp-10) var(--sp-10) auto; width: min(380px, calc(100vw - 64px)); }
}
.c-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--sh-md);
  font-size: var(--fs-md);
  animation: thz-rise var(--dur-base) var(--ease-out);
}
@keyframes thz-rise { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.c-toast--success { border-inline-start: 3px solid var(--brand); }
.c-toast--danger { border-inline-start: 3px solid var(--red); }
.c-toast--warning { border-inline-start: 3px solid var(--org); }
.c-toast--info { border-inline-start: 3px solid var(--mute); }

/* ── Sekme ────────────────────────────────────────────────────────────── */
.c-tab__list {
  display: flex;
  gap: var(--sp-1);
  /* Onaylı şablonda sekme şeridi kart kenarından 6px içeride başlar. */
  padding-inline: var(--sp-2);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.c-tab__list::-webkit-scrollbar { display: none; }
.c-tab__button {
  flex: 0 0 auto;
  min-height: var(--tap);
  padding: var(--sp-6) var(--sp-4);
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--mute);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  white-space: nowrap;
}
.c-tab__button:hover { color: var(--ink); }
.c-tab__button[aria-selected='true'] { color: var(--brand); border-bottom-color: var(--brand); }
.c-tab__panel { padding: var(--sp-9); }

/* ── Akordiyon ────────────────────────────────────────────────────────── */
.c-accordion { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); overflow: hidden; }
.c-accordion__item + .c-accordion__item { border-top: 1px solid var(--line); }
.c-accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  min-height: var(--tap);
  padding: var(--sp-6) var(--sp-8);
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.c-accordion__head::-webkit-details-marker { display: none; }
.c-accordion__head:hover { background: var(--card-2); }
.c-accordion__arrow { color: var(--mute); transition: rotate var(--dur-base) var(--ease-out); }
.c-accordion__item[open] .c-accordion__arrow { rotate: 180deg; }
.c-accordion__body { padding: 0 var(--sp-8) var(--sp-8); color: var(--ink-2); line-height: var(--lh-loose); }