/* ==========================================================================
   Ultra Premium Greyscale UI — v2.2 (Pro)
   Author: HTML + CSS + Javascript (🔨🤖🔧)
   Notes: All decorative layers are non-interactive (pointer-events:none)
   ========================================================================== */

/* ----------------------------- */
/*  Inter Variable (Hosted)      */
/* ----------------------------- */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:
    url("https://rsms.me/inter/font-files/InterVariable.woff2?v=4.1") format("woff2-variations"),
    url("https://rsms.me/inter/font-files/InterVariable.woff2?v=4.1") format("woff2");
}

/* ----------------------------- */
/*  Design Tokens                */
/* ----------------------------- */
:root{
  /* Greys */
  --g-0:#ffffff;
  --g-25:#fcfdff;
  --g-50:#f7f9fc;
  --g-100:#f3f5f9;
  --g-150:#eef1f6;
  --g-200:#e9edf4;
  --g-250:#e2e7f0;
  --g-300:#d7deea;
  --g-350:#cfd6e3;
  --g-400:#c3cad7;
  --g-500:#aab3c4;
  --g-600:#8e98ac;
  --g-700:#6c7588;
  --g-800:#474f5f;
  --g-900:#0e1521;

  /* Base */
  --ui-bg: var(--g-100);
  --ui-surface: var(--g-0);
  --ui-surface-2: var(--g-50);
  --ui-line: var(--g-300);
  --ui-line-strong: var(--g-350);

  --ui-text: var(--g-900);
  --ui-muted: #424a5b;
  --ui-subtle: #687184;

  /* Focus (monochrome, subtle) */
  --ui-focus: rgba(17, 24, 39, .18);
  --ui-focus-ring: 0 0 0 .28rem var(--ui-focus);

  /* Radii */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --radius-xxl: 22px;

  /* Shadows (layered) */
  --shadow-01: 0 1px 1px rgba(20,24,40,.06), 0 2px 10px rgba(20,24,40,.06);
  --shadow-02: 0 8px 22px rgba(20,24,40,.10), 0 2px 6px rgba(20,24,40,.06);
  --shadow-03: 0 18px 46px rgba(20,24,40,.14), 0 8px 24px rgba(20,24,40,.10);

  /* Inner lines */
  --inner-top: inset 0 1px 0 rgba(255,255,255,.75);
  --inner-hair: inset 0 0 0 1px rgba(255,255,255,.45);

  /* Motion */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-soft: cubic-bezier(.33,1,.68,1);
  --dur-1: .16s; --dur-2: .28s; --dur-3: .45s;

  /* Sizes */
  --container: 1280px; --content-narrow: 960px;
  --h-sm: 36px; --h-md: 40px; --h-lg: 44px;

  /* Sheen defaults */
  --x:50%; --y:50%;
}

/* Motion-safe */
@media (prefers-reduced-motion: reduce){
  :root{ --dur-1:0s; --dur-2:0s; --dur-3:0s }
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important }
}

/* ----------------------------- */
/*  Base & Typography            */
/* ----------------------------- */
html,body{
  background:var(--ui-bg);
  color:var(--ui-text);
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.ui-body{min-height:100dvh}

/* Fluid type */
.h0{font-size:clamp(2.45rem,2.6vw+1.2rem,3.2rem); font-weight:900; letter-spacing:-.022em}
.h1{font-size:clamp(1.9rem,1.6vw+1rem,2.4rem); font-weight:800; letter-spacing:-.015em}
.h2{font-size:clamp(1.45rem,.6vw+1.1rem,1.7rem); font-weight:750}
.h3{font-size:1.125rem; font-weight:700}
.lead{color:var(--ui-muted)}
.text-secondary{color:var(--ui-muted)!important}
.text-subtle{color:var(--ui-subtle)!important}
.tracking-tight{letter-spacing:-.01em}

/* ----------------------------- */
/*  Surfaces & Elevation         */
/* ----------------------------- */
.card{
  position:relative; z-index:0;
  border:1px solid var(--ui-line);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--ui-surface), var(--ui-surface-2));
  box-shadow:var(--shadow-01);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,0) 45%);
  mix-blend-mode:overlay; opacity:.5;
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
  pointer-events:none; box-shadow: var(--inner-top), var(--inner-hair);
}
.card.hover-lift:hover{ transform:translateY(-2px); box-shadow:var(--shadow-02) }
.rounded-4{ border-radius:var(--radius-lg)!important }
.soft-shadow{ box-shadow:var(--shadow-02) }
.shadow-lgx{ box-shadow:var(--shadow-03) }

/* Header (frosted) */
.header-bar{
  position:relative; z-index:0;
  border:1px solid var(--ui-line);
  border-radius:var(--radius-xxl);
  background:
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55)),
    linear-gradient(180deg, #fff, #fbfcff);
  backdrop-filter:saturate(120%) blur(8px);
  box-shadow:var(--shadow-01);
}
.header-bar::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:var(--inner-top); pointer-events:none }

/* ----------------------------- */
/*  Navbar                       */
/* ----------------------------- */
.navbar{
  border-color:var(--ui-line)!important;
  background:color-mix(in oklab, #fff 88%, var(--g-150));
  backdrop-filter:saturate(120%) blur(8px);
  transition:box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.navbar.stuck{ box-shadow:var(--shadow-01) }
.navbar .nav-link{ color:var(--ui-subtle); font-weight:650 }
.navbar .nav-link:hover{ color:var(--ui-text) }
.navbar .btn{ border-radius:12px }

/* ----------------------------- */
/*  Buttons                      */
/* ----------------------------- */
.btn{
  --btn-bg: #0f141b; --btn-fg:#fff; --btn-bd: var(--ui-line-strong);
  position:relative; overflow:hidden; z-index:0;
  border-radius:12px; font-weight:800; letter-spacing:.005em;
  height:var(--h-md); border:1px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.btn:active{ transform:translateY(.5px) }

.btn-primary{
  --btn-bg: linear-gradient(180deg, #181d26, #111722);
  --btn-bd: #1f2632;
}
.btn-primary:hover{ --btn-bg: linear-gradient(180deg, #171c24, #0d131c) }

.btn-outline{
  --btn-bg: #fff; --btn-fg:#222733; --btn-bd: var(--ui-line-strong);
}
.btn-outline:hover{ --btn-bg: color-mix(in oklab, #fff, var(--g-150) 35%) }

/* Sheen — safe (non-interactive layer) */
.btn::after, .chip::after{
  content:""; position:absolute; top:var(--y); left:var(--x);
  width:160px; height:160px; transform:translate(-50%,-50%);
  pointer-events:none; z-index:-1; /* stay behind content */
  background:
    radial-gradient(circle at center, rgba(255,255,255,.45), rgba(255,255,255,0) 60%),
    radial-gradient(circle at center, rgba(255,255,255,.15), transparent 45%);
  opacity:0; transition:opacity var(--dur-2) var(--ease-out);
  mix-blend-mode:screen;
}
.btn:hover::after, .chip:hover::after{ opacity:.6 }

.btn-light{ --btn-bg:#fff; --btn-fg:#1b2130; --btn-bd:var(--ui-line) }
.btn-light:hover{ --btn-bg:color-mix(in oklab,#fff,var(--g-150) 25%) }
.btn-ghost{ --btn-bg:transparent; --btn-fg:var(--ui-text); --btn-bd:transparent; background:transparent; border-color:transparent }
.btn-ghost:hover{ background:var(--g-50) }

.btn-sm{ height:var(--h-sm); padding:.2rem .65rem; border-radius:10px }
.btn-lg{ height:var(--h-lg); padding:.25rem 1rem; border-radius:14px }

/* ----------------------------- */
/*  Focus normalization          */
/* ----------------------------- */
:where(.btn, .form-control, .form-select, .nav-link, .list-group-item):focus{
  outline:0; box-shadow:var(--ui-focus-ring);
}

/* ----------------------------- */
/*  Forms                        */
/* ----------------------------- */
.form-control, .form-select{
  height:var(--h-lg);
  border-radius:12px; border:1px solid var(--ui-line);
  background:#fff; color:var(--ui-text);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.form-control::placeholder{ color:#99a3b2 }
.input-group-text{ border-radius:12px; border:1px solid var(--ui-line); background:#f6f8fb; color:#3b4252 }
.form-check-input{ border-color:var(--ui-line) }
.form-check-input:focus{ box-shadow:var(--ui-focus-ring) }
.form-check-input:checked{ background-color:#1f2430; border-color:#1f2430 }

.search-input{ border:1px solid var(--ui-line); background:linear-gradient(180deg,#fff,#fbfcff); border-radius:14px; box-shadow:var(--inner-top) }
.search-input input{ border:0; background:transparent }

/* ----------------------------- */
/*  Tables (dense, sticky, fade) */
/* ----------------------------- */
.table-wrap{ position:relative }
.table{
  --bs-table-striped-bg:#fbfcff; --bs-table-hover-bg:#f3f6fb;
  margin:0; border-collapse:separate; border-spacing:0;
}
.table thead th{
  position:sticky; top:0; z-index:2;
  background:linear-gradient(180deg,#fff,#f7f9fc);
  color:#2a3140; font-weight:850;
  border-bottom:1px solid var(--ui-line);
  box-shadow: inset 0 -1px 0 var(--ui-line), 0 2px 0 rgba(255,255,255,.65);
}
.table td, .table th{ vertical-align:middle }
.table tr td{ border-top:1px solid var(--ui-line) }
.table tbody tr{
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), outline-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.table tbody tr:hover{ background:#fff; outline:2px solid #fff; outline-offset:-2px; box-shadow:0 2px 10px rgba(16,24,40,.06) }

.table-edge{ position:relative; overflow:auto }
.table-edge::before, .table-edge::after{
  content:""; position:absolute; top:0; bottom:0; width:28px; pointer-events:none; z-index:3;
}
.table-edge::before{ left:0; background:linear-gradient(90deg,#fff, rgba(255,255,255,0)) }
.table-edge::after{ right:0; background:linear-gradient(270deg,#fff, rgba(255,255,255,0)) }

.table .status-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:.5rem; box-shadow:0 0 0 1px rgba(0,0,0,.05) }
.table .status-open{ background:#96a3b8 }
.table .status-pending{ background:#b3bbcb }
.table .status-done{ background:#7d8aa1 }

/* ----------------------------- */
/*  Badges & Chips               */
/* ----------------------------- */
.badge{
  border-radius:999px; font-weight:800;
  background:#eef2f8; color:#2a3140; border:1px solid #e2e7f0; padding:.35rem .6rem;
}
.chip{
  position:relative; display:inline-flex; align-items:center; gap:.5rem;
  background:linear-gradient(180deg,#eef3fb,#e9eef8);
  color:#2f3a4e; border-radius:999px; padding:.42rem .85rem; border:1px solid #e1e7f2; font-size:.875rem;
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  box-shadow:var(--shadow-01); z-index:0;
}
.chip:hover{ transform:translateY(-1px); box-shadow:var(--shadow-02) }

/* ----------------------------- */
/*  Sidebar & List Group         */
/* ----------------------------- */
.ui-aside{
  position:relative; z-index:0; /* create context below links */
  background:#fff; border:1px solid var(--ui-line);
  border-radius:18px; box-shadow:var(--shadow-01);
}
.ui-aside::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:var(--inner-top); pointer-events:none; z-index:0; /* decorative only */
}
/* Ensure clickable area is above any decoration */
.ui-aside .list-group{ position:relative; z-index:1 }
.ui-aside .list-group-item{
  border:0; border-radius:12px; color:var(--ui-subtle);
  padding:.65rem .75rem; font-weight:700;
  display:flex; align-items:center; gap:.5rem; min-height:40px;
  background:transparent;
  transition:background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.ui-aside .list-group-item:hover{ background:#f3f6fb; color:var(--ui-text) }
.ui-aside .list-group-item.active{
  background:#eff3f9; color:#2a3140;
  box-shadow:inset 0 0 0 1px var(--ui-line-strong);
}

/* ----------------------------- */
/*  Tabs & Segmented             */
/* ----------------------------- */
.nav-tabs{ border-bottom:1px solid var(--ui-line) }
.nav-tabs .nav-link{
  border:0; color:var(--ui-subtle); padding:.6rem .8rem; font-weight:800;
  transition:color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.nav-tabs .nav-link.active{ color:var(--ui-text); border-bottom:2px solid #2a3140; background:transparent }

.seg{ display:inline-flex; background:#f1f4f9; border:1px solid var(--ui-line); border-radius:12px; padding:4px }
.seg .nav-link{ border:0; border-radius:10px; padding:.45rem .8rem; color:var(--ui-subtle); font-weight:750 }
.seg .nav-link.active{ background:#fff; color:var(--ui-text); box-shadow:var(--shadow-01) }

/* ----------------------------- */
/*  Progress                     */
/* ----------------------------- */
.progress{ height:10px; border-radius:999px; background:#eef2f8; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.7) }
.progress-bar{ background:#2a3140 }

/* ----------------------------- */
/*  Tooltip                      */
/* ----------------------------- */
.tooltip-inner{
  background:#161a22; color:#fff; border-radius:10px; border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow-02)
}
.tooltip .tooltip-arrow{ display:none }

/* ----------------------------- */
/*  Skeleton                     */
/* ----------------------------- */
.skeleton{ position:relative; overflow:hidden; background:#eef2f8; border-radius:8px; min-height:1rem }
.skeleton::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 100%);
  animation:skeleton 1.25s infinite var(--ease-soft); pointer-events:none;
}
@keyframes skeleton{ 100%{ transform:translateX(100%) } }

/* ----------------------------- */
/*  Dividers & Utilities         */
/* ----------------------------- */
.hr{ height:1px; background:var(--ui-line); margin:1rem 0 }
.divider-v{ width:1px; background:var(--ui-line); height:24px }
.avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px #e5e8ef }
.content-narrow{ max-width:var(--content-narrow) }
.max-w-1280{ max-width:var(--container) }
.hidden-scrollbar{ scrollbar-width:none }
.hidden-scrollbar::-webkit-scrollbar{ display:none }

/* ----------------------------- */
/*  Hero                         */
/* ----------------------------- */
.brand-dot{ width:14px; height:14px; background:#2a3140; border-radius:50%; display:inline-block }
.hero{ min-height:60vh }

/* ----------------------------- */
/*  Alerts                       */
/* ----------------------------- */
.alert{ border-radius:14px; border:1px solid var(--ui-line); background:#ffffff; color:#1b2130; box-shadow:var(--shadow-01) }
.alert-light{ background:#ffffff }

/* ----------------------------- */
/*  Toolbar                      */
/* ----------------------------- */
.toolbar{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center }
.toolbar .btn, .toolbar .form-select{ height:40px }

/* ----------------------------- */
/*  Kanban                       */
/* ----------------------------- */
.kanban{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem }
.kanban-col{
  background:#fff; border:1px solid var(--ui-line); border-radius:16px; padding:1rem; box-shadow:var(--shadow-01); position:relative; z-index:0;
}
.kanban-col::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:var(--inner-top); pointer-events:none; z-index:0 }
.kanban-card{
  border:1px solid var(--ui-line); border-radius:12px; padding:.75rem 1rem; margin-bottom:.75rem; background:#fff;
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.kanban-card:hover{ box-shadow:var(--shadow-02); transform:translateY(-1px) }

/* ----------------------------- */
/*  Toast helper container       */
/* ----------------------------- */
#ui-toast-wrap .alert{ box-shadow:var(--shadow-01) }

/* ----------------------------- */
/*  Print                        */
/* ----------------------------- */
@media print{
  .navbar, footer { display:none }
  .card, .alert, .ui-aside, .kanban-col{ box-shadow:none }
}

/* ----------------------------- */
/*  Responsive                   */
/* ----------------------------- */
@media (max-width: 991.98px){
  .header-bar{ border-radius:14px }
  .ui-aside{ position:static }
  .kanban{ grid-template-columns:1fr }
}

/* === Destek Bileti Görünümü === */
.ticket-view .ticket-header h1 {
  font-weight: 600;
}

.ticket-view .ticket-header .small {
  font-size: 0.85rem;
}

/* Mesaj geçmişi */
.msg-thread {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.msg {
  max-width: 75%;
  padding: 12px 16px;
  border-radius: 16px;
  position: relative;
  font-size: 0.95rem;
  line-height: 1.4;
}

.msg-user {
  align-self: flex-start;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-bottom-left-radius: 4px;
}

.msg-admin {
  align-self: flex-end;
  background: #0d6efd;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.msg-header {
  font-size: 0.8rem;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}

.msg-user .msg-header {
  color: #495057;
}

.msg-admin .msg-header {
  color: rgba(255,255,255,0.85);
}

/* Özeti kartı */
.ticket-summary ul {
  font-size: 0.9rem;
}
.ticket-summary li span:last-child {
  font-weight: 500;
}