/* Tevkil360 — Premium Cosmetic Layer v2
   VISUAL ONLY. No application logic, routes, Firebase behavior or JS handlers are changed. */

:root{
  --t360-navy-950:#070b12;
  --t360-navy-900:#0b1220;
  --t360-navy-800:#111a2d;
  --t360-gold:#f59e0b;
  --t360-gold-2:#fbbf24;
  --t360-gold-soft:rgba(245,158,11,.14);
  --t360-gold-line:rgba(245,158,11,.28);
  --t360-line:rgba(148,163,184,.18);
  --t360-shadow-sm:0 8px 24px rgba(15,23,42,.07);
  --t360-shadow:0 20px 55px rgba(15,23,42,.11);
  --t360-shadow-lg:0 28px 80px rgba(15,23,42,.16);
  --t360-shadow-dark:0 22px 60px rgba(0,0,0,.30);
  --t360-ease:cubic-bezier(.2,.8,.2,1);
}

html{scroll-behavior:smooth;background:#f8fafc}
body{
  min-height:100vh;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 9% -3%, rgba(245,158,11,.075), transparent 30rem),
    radial-gradient(circle at 93% 4%, rgba(59,130,246,.045), transparent 33rem),
    linear-gradient(180deg,#fbfcfe 0%,#f8fafc 46%,#f6f8fb 100%);
}
html.dark body,.dark body{
  background:
    radial-gradient(circle at 7% -3%, rgba(245,158,11,.105), transparent 32rem),
    radial-gradient(circle at 93% 5%, rgba(59,130,246,.070), transparent 36rem),
    linear-gradient(180deg,#080c14 0%,#090d16 50%,#070b12 100%);
}

/* ambient texture — decorative only */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.22;
  background-image:
    linear-gradient(rgba(15,23,42,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,23,42,.025) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(to bottom,black,transparent 68%);
  mask-image:linear-gradient(to bottom,black,transparent 68%);
}
.dark body::before{opacity:.12;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px)}
#root{position:relative;z-index:1}

/* Typography rhythm */
h1,h2,h3{letter-spacing:-.025em}
.font-black{letter-spacing:-.012em}

/* Header / top navigation */
header,nav,.sticky.top-0{
  -webkit-backdrop-filter:saturate(145%) blur(16px);
  backdrop-filter:saturate(145%) blur(16px);
}
.sticky.top-0.bg-slate-900{
  background:rgba(8,12,20,.89)!important;
  border-bottom-color:rgba(245,158,11,.14)!important;
  box-shadow:0 10px 40px rgba(0,0,0,.18)!important;
}
header img[src*="logo"],nav img[src*="logo"],img[alt="Tevkil360"]{
  filter:drop-shadow(0 7px 18px rgba(245,158,11,.10));
}

/* Primary cards / surfaces */
.rounded-2xl,.rounded-3xl{
  transition:transform .28s var(--t360-ease),box-shadow .28s ease,border-color .28s ease,background-color .28s ease;
}
.bg-white.rounded-2xl,.bg-white.rounded-3xl,
[class*="bg-white/"][class*="rounded-2xl"],[class*="bg-white/"][class*="rounded-3xl"]{
  box-shadow:var(--t360-shadow-sm);
  border-color:rgba(148,163,184,.17)!important;
}
.dark .dark\:bg-slate-900.rounded-2xl,.dark .dark\:bg-slate-900.rounded-3xl,
.dark .dark\:bg-slate-800.rounded-2xl,.dark .dark\:bg-slate-800.rounded-3xl{
  box-shadow:var(--t360-shadow-dark);
  border-color:rgba(148,163,184,.15)!important;
}
@media(hover:hover){
  .rounded-2xl.border:hover,.rounded-3xl.border:hover{
    border-color:rgba(245,158,11,.29)!important;
    box-shadow:0 18px 48px rgba(15,23,42,.11),0 0 0 1px rgba(245,158,11,.035) inset;
  }
  .dark .rounded-2xl.border:hover,.dark .rounded-3xl.border:hover{
    box-shadow:0 22px 58px rgba(0,0,0,.30),0 0 0 1px rgba(245,158,11,.045) inset;
  }
}

/* Auth shell: styles existing container by its existing tabs */
:where(div):has(> #tab-auth-login):has(> #tab-auth-register){
  padding:5px!important;
  border:1px solid rgba(148,163,184,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.dark :where(div):has(> #tab-auth-login):has(> #tab-auth-register){box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
#tab-auth-login,#tab-auth-register{position:relative;overflow:hidden}
#tab-auth-login::after,#tab-auth-register::after{
  content:"";position:absolute;left:22%;right:22%;bottom:2px;height:2px;border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--t360-gold),transparent);opacity:0;transform:scaleX(.4);transition:.25s ease;
}
#tab-auth-login.bg-white::after,#tab-auth-register.bg-white::after,
.dark #tab-auth-login.dark\:bg-slate-800::after,.dark #tab-auth-register.dark\:bg-slate-800::after{opacity:.8;transform:scaleX(1)}

/* Sidebar/menu visual hierarchy */
#menu-btn-new-request,#menu-btn-active-requests,#menu-btn-passive-requests,#menu-btn-messages{
  position:relative;overflow:hidden;isolation:isolate;
}
#menu-btn-new-request::before,#menu-btn-active-requests::before,#menu-btn-passive-requests::before,#menu-btn-messages::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(100deg,transparent 10%,rgba(255,255,255,.07) 46%,transparent 78%);
  transform:translateX(-115%);transition:opacity .2s ease;
}
@media(hover:hover){
  #menu-btn-new-request:hover::before,#menu-btn-active-requests:hover::before,#menu-btn-passive-requests:hover::before,#menu-btn-messages:hover::before{opacity:1;animation:t360-shimmer .9s var(--t360-ease)}
}
#menu-btn-new-request.bg-amber-500{box-shadow:0 10px 28px rgba(245,158,11,.20),inset 0 1px 0 rgba(255,255,255,.32)}

/* Buttons */
button,a[role="button"]{
  transition:transform .18s ease,box-shadow .22s ease,filter .22s ease,background-color .22s ease,border-color .22s ease,color .22s ease;
}
button:not(:disabled):active,a[role="button"]:active{transform:translateY(1px) scale(.985)}
.bg-amber-500,.bg-amber-400{background-image:linear-gradient(180deg,rgba(255,255,255,.14),transparent 45%)}
@media(hover:hover){
  button:not(:disabled):hover,a[role="button"]:hover{filter:brightness(1.025)}
  .bg-amber-500:hover,.bg-amber-400:hover{
    box-shadow:0 12px 30px rgba(245,158,11,.25),0 0 0 1px rgba(255,255,255,.10) inset;
    transform:translateY(-1px);
  }
}
#btn-header-login{position:relative;overflow:hidden;box-shadow:0 10px 28px rgba(245,158,11,.20)}
#btn-header-login::after{
  content:"";position:absolute;top:-80%;bottom:-80%;width:42%;left:-60%;transform:rotate(14deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);pointer-events:none;
}
@media(hover:hover){#btn-header-login:hover::after{animation:t360-button-sheen .75s var(--t360-ease)}}

/* Inputs */
input,select,textarea{
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease,transform .18s ease;
}
input:hover,select:hover,textarea:hover{border-color:rgba(148,163,184,.42)!important}
input:focus,select:focus,textarea:focus{
  box-shadow:0 0 0 4px rgba(245,158,11,.105)!important;
  border-color:rgba(245,158,11,.72)!important;
}
input::placeholder,textarea::placeholder{opacity:.63}
label{letter-spacing:.005em}

/* Modals */
.fixed.inset-0[class*="backdrop-blur"]{-webkit-backdrop-filter:blur(10px) saturate(115%);backdrop-filter:blur(10px) saturate(115%)}
.fixed.inset-0 > .rounded-3xl{box-shadow:0 38px 110px rgba(0,0,0,.44),0 0 0 1px rgba(255,255,255,.025) inset}
.fixed.inset-0 > .rounded-3xl::before{
  content:"";display:block;position:absolute;left:10%;right:10%;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,158,11,.75),transparent);opacity:.6;pointer-events:none;
}

/* Tables and list rows */
table{border-collapse:separate;border-spacing:0}
thead th{letter-spacing:.035em}
tbody tr{transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease}
@media(hover:hover){tbody tr:hover{background-color:rgba(245,158,11,.028)}}
.dark tbody tr:hover{background-color:rgba(245,158,11,.045)}

/* Badges and icon containers */
[class*="rounded-full"][class*="bg-amber"],[class*="rounded-xl"][class*="bg-amber"]{
  box-shadow:0 0 0 1px rgba(245,158,11,.09) inset;
}
[class*="rounded-2xl"][class*="bg-gradient-to"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
svg{shape-rendering:geometricPrecision}

/* Dividers */
.border-t,.border-b{border-color:rgba(148,163,184,.16)}
.dark .border-t,.dark .border-b{border-color:rgba(148,163,184,.12)}

/* Scrollbars */
*{scrollbar-width:thin;scrollbar-color:rgba(100,116,139,.45) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(100,116,139,.34);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(245,158,11,.44);border:2px solid transparent;background-clip:padding-box}

/* Page entrance */
#root{animation:t360-root-in .5s var(--t360-ease) both}
#root > *{animation:t360-content-in .46s .04s var(--t360-ease) both}

/* Floating/dropdown surfaces */
.absolute[class*="shadow"].rounded-2xl,.absolute[class*="shadow"].rounded-xl{
  box-shadow:0 22px 60px rgba(15,23,42,.20)!important;
  -webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%);
}
.dark .absolute[class*="shadow"].rounded-2xl,.dark .absolute[class*="shadow"].rounded-xl{box-shadow:0 24px 66px rgba(0,0,0,.38)!important}

/* Dark major surfaces gain subtle depth */
.bg-slate-900{background-image:linear-gradient(135deg,rgba(255,255,255,.018),transparent 38%)}
.bg-slate-950{background-image:linear-gradient(135deg,rgba(255,255,255,.014),transparent 40%)}

/* Accessibility */
:focus-visible{outline:2px solid rgba(245,158,11,.92);outline-offset:3px}

@keyframes t360-root-in{from{opacity:.01;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes t360-content-in{from{opacity:.01;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes t360-shimmer{from{transform:translateX(-115%)}to{transform:translateX(115%)}}
@keyframes t360-button-sheen{from{left:-60%}to{left:125%}}

/* Mobile: maintain touch clarity, avoid over-animation */
@media(max-width:640px){
  body::before{background-size:32px 32px;opacity:.12}
  .rounded-3xl{border-radius:1.25rem}
  input,select,textarea{font-size:16px}
  #root,#root>*{animation-duration:.28s}
  .bg-white.rounded-2xl,.bg-white.rounded-3xl{box-shadow:0 12px 32px rgba(15,23,42,.09)}
  #btn-header-login:hover{transform:none}
}

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

/* === Tevkil360 Visual Refresh v3 — deliberately visible, still CSS-only === */
:root{--t360-accent:#f5a623;--t360-ink:#07111f;--t360-surface:#ffffff}

/* Main shell: cleaner, brighter, more premium */
body{background:
 radial-gradient(900px 520px at 8% -10%,rgba(245,166,35,.13),transparent 58%),
 radial-gradient(850px 500px at 100% 0%,rgba(37,99,235,.08),transparent 62%),
 #f4f7fb!important}
.dark body{background:
 radial-gradient(900px 520px at 8% -10%,rgba(245,166,35,.15),transparent 58%),
 radial-gradient(850px 500px at 100% 0%,rgba(37,99,235,.10),transparent 62%),
 #060b13!important}

/* Header gets a strong premium bar */
header,.sticky.top-0{border-bottom:1px solid rgba(245,166,35,.18)!important}
.sticky.top-0{box-shadow:0 14px 38px rgba(7,17,31,.10)!important}

/* Large page titles */
h1{font-weight:850!important;line-height:1.05!important;letter-spacing:-.045em!important}
h2{letter-spacing:-.035em!important}

/* Key content cards now visibly elevated */
.bg-white.rounded-xl,.bg-white.rounded-2xl,.bg-white.rounded-3xl{
 background:linear-gradient(180deg,#fff 0%,#fbfcff 100%)!important;
 border:1px solid rgba(148,163,184,.20)!important;
 box-shadow:0 18px 50px rgba(15,23,42,.09),0 1px 2px rgba(15,23,42,.04)!important
}
.dark .dark\:bg-slate-900.rounded-xl,.dark .dark\:bg-slate-900.rounded-2xl,.dark .dark\:bg-slate-900.rounded-3xl,
.dark .dark\:bg-slate-800.rounded-xl,.dark .dark\:bg-slate-800.rounded-2xl,.dark .dark\:bg-slate-800.rounded-3xl{
 background:linear-gradient(180deg,rgba(17,26,45,.98),rgba(10,17,29,.98))!important;
 border:1px solid rgba(148,163,184,.14)!important;
 box-shadow:0 24px 70px rgba(0,0,0,.28)!important
}

/* Sidebar / nav links */
aside{border-right-color:rgba(148,163,184,.14)!important;box-shadow:10px 0 40px rgba(15,23,42,.035)}
aside button,aside a{border-radius:14px!important}
aside .bg-amber-500,aside .bg-amber-400{box-shadow:0 10px 28px rgba(245,166,35,.28)!important}

/* Buttons are visually richer */
button[class*="bg-amber"],a[class*="bg-amber"]{
 background-image:linear-gradient(135deg,#fbbf24 0%,#f59e0b 55%,#e89009 100%)!important;
 color:#111827!important;
 font-weight:800!important;
 border:1px solid rgba(255,255,255,.28)!important;
 box-shadow:0 10px 24px rgba(245,158,11,.22),inset 0 1px 0 rgba(255,255,255,.35)!important
}
@media(hover:hover){button[class*="bg-amber"]:hover,a[class*="bg-amber"]:hover{transform:translateY(-2px)!important;box-shadow:0 16px 34px rgba(245,158,11,.32)!important}}

/* Inputs unmistakably refreshed */
input,select,textarea{
 border-radius:12px!important;
 min-height:44px;
 border-color:rgba(148,163,184,.30)!important;
 background-clip:padding-box!important
}
input:focus,select:focus,textarea:focus{transform:translateY(-1px);box-shadow:0 0 0 4px rgba(245,158,11,.13),0 8px 24px rgba(15,23,42,.06)!important}

/* Status/pill elements */
.rounded-full{box-shadow:inset 0 0 0 1px rgba(148,163,184,.08)}

/* Modal presentation */
.fixed.inset-0{animation:t360-fade .20s ease both}
.fixed.inset-0>[class*="rounded"]{animation:t360-modal .30s cubic-bezier(.2,.8,.2,1) both}

/* Section dividers and small premium accent */
main h1::after,main h2::after{
 content:"";display:block;width:42px;height:3px;margin-top:10px;border-radius:999px;
 background:linear-gradient(90deg,#fbbf24,#f59e0b);opacity:.9
}
main h1.text-center::after,main h2.text-center::after{margin-left:auto;margin-right:auto}

/* Tables */
thead{background:rgba(148,163,184,.055)}
tbody tr:hover{background:rgba(245,158,11,.055)!important}

@keyframes t360-fade{from{opacity:0}to{opacity:1}}
@keyframes t360-modal{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

@media(max-width:768px){
 main{padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}
 .bg-white.rounded-2xl,.bg-white.rounded-3xl{box-shadow:0 12px 32px rgba(15,23,42,.08)!important}
}

/* ===== Tevkil360 top navigation hover motion ===== */
header a, header button,
nav a, nav button,
.sticky.top-0 a, .sticky.top-0 button {
  position:relative;
  transform-origin:center;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease, opacity .22s ease!important;
  will-change:transform;
}

@media (hover:hover) and (pointer:fine){
  header a:hover, header button:hover,
  nav a:hover, nav button:hover,
  .sticky.top-0 a:hover, .sticky.top-0 button:hover {
    transform:translateY(-2px) scale(1.055);
    z-index:5;
  }

  /* Plain top-menu text gets a refined glow/underline */
  header a:not([class*="bg-"]):hover,
  header button:not([class*="bg-"]):hover,
  nav a:not([class*="bg-"]):hover,
  nav button:not([class*="bg-"]):hover,
  .sticky.top-0 a:not([class*="bg-"]):hover,
  .sticky.top-0 button:not([class*="bg-"]):hover {
    color:#f59e0b!important;
    text-shadow:0 0 18px rgba(245,158,11,.18);
  }

  header a:not([class*="bg-"])::after,
  header button:not([class*="bg-"])::after,
  nav a:not([class*="bg-"])::after,
  nav button:not([class*="bg-"])::after,
  .sticky.top-0 a:not([class*="bg-"])::after,
  .sticky.top-0 button:not([class*="bg-"])::after {
    content:"";
    position:absolute;
    left:50%;
    bottom:-4px;
    width:0;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,#fbbf24,#f59e0b);
    transform:translateX(-50%);
    transition:width .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
    opacity:0;
    pointer-events:none;
  }

  header a:not([class*="bg-"]):hover::after,
  header button:not([class*="bg-"]):hover::after,
  nav a:not([class*="bg-"]):hover::after,
  nav button:not([class*="bg-"]):hover::after,
  .sticky.top-0 a:not([class*="bg-"]):hover::after,
  .sticky.top-0 button:not([class*="bg-"]):hover::after {
    width:68%;
    opacity:1;
  }

  /* CTA buttons in the top navigation get a stronger lift */
  header a[class*="bg-amber"]:hover,
  header button[class*="bg-amber"]:hover,
  nav a[class*="bg-amber"]:hover,
  nav button[class*="bg-amber"]:hover,
  .sticky.top-0 a[class*="bg-amber"]:hover,
  .sticky.top-0 button[class*="bg-amber"]:hover {
    transform:translateY(-3px) scale(1.06)!important;
    box-shadow:0 18px 38px rgba(245,158,11,.34),0 0 0 5px rgba(245,158,11,.08)!important;
  }
}

/* Keep keyboard navigation polished too */
header a:focus-visible, header button:focus-visible,
nav a:focus-visible, nav button:focus-visible,
.sticky.top-0 a:focus-visible, .sticky.top-0 button:focus-visible {
  outline:none!important;
  box-shadow:0 0 0 4px rgba(245,158,11,.16)!important;
}

/* V5 — Premium bottom navigation icon system */
#bottom-navigation-bar{overflow:visible!important}
#bottom-navigation-bar button[id^="bottom-"]{min-height:62px;overflow:visible;isolation:isolate}
#bottom-navigation-bar button[id^="bottom-"] svg{width:21px!important;height:21px!important;padding:5px;box-sizing:content-box;border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.02));border:1px solid rgba(148,163,184,.20);box-shadow:0 5px 14px rgba(2,6,23,.12),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,background .28s ease,border-color .28s ease,filter .28s ease;transform-origin:50% 60%}
#bottom-nav-aktif-is svg{background:linear-gradient(145deg,rgba(245,158,11,.22),rgba(245,158,11,.05))!important;border-color:rgba(245,158,11,.32)!important;filter:drop-shadow(0 3px 7px rgba(245,158,11,.13))}
#bottom-nav-pasif-is svg{background:linear-gradient(145deg,rgba(16,185,129,.20),rgba(16,185,129,.04))!important;border-color:rgba(16,185,129,.28)!important;filter:drop-shadow(0 3px 7px rgba(16,185,129,.12))}
#bottom-nav-yeni-talep svg{width:24px!important;height:24px!important;padding:7px;margin-top:-7px;border-radius:15px;background:linear-gradient(145deg,#fbbf24,#f59e0b)!important;color:#0f172a!important;border-color:rgba(251,191,36,.72)!important;box-shadow:0 8px 20px rgba(245,158,11,.28),inset 0 1px 0 rgba(255,255,255,.45)!important}
#bottom-nav-mesajlar svg{background:linear-gradient(145deg,rgba(59,130,246,.20),rgba(59,130,246,.04))!important;border-color:rgba(59,130,246,.28)!important;filter:drop-shadow(0 3px 7px rgba(59,130,246,.12))}
#bottom-nav-profil svg{background:linear-gradient(145deg,rgba(139,92,246,.18),rgba(139,92,246,.04))!important;border-color:rgba(139,92,246,.26)!important;filter:drop-shadow(0 3px 7px rgba(139,92,246,.11))}
#bottom-navigation-bar button[id^="bottom-staff-"] svg,#bottom-navigation-bar button[id^="bottom-admin-"] svg{background:linear-gradient(145deg,rgba(245,158,11,.16),rgba(99,102,241,.06));border-color:rgba(245,158,11,.22)}
@media (hover:hover) and (pointer:fine){#bottom-navigation-bar button[id^="bottom-"]:hover svg{transform:translateY(-5px) scale(1.18);border-color:rgba(245,158,11,.62);box-shadow:0 11px 24px rgba(2,6,23,.18),0 0 0 4px rgba(245,158,11,.08),inset 0 1px 0 rgba(255,255,255,.24);filter:brightness(1.12)}#bottom-nav-yeni-talep:hover svg{transform:translateY(-7px) scale(1.20) rotate(8deg);box-shadow:0 14px 28px rgba(245,158,11,.38),0 0 0 5px rgba(245,158,11,.10),inset 0 1px 0 rgba(255,255,255,.5)!important}#bottom-nav-mesajlar:hover svg{transform:translateY(-5px) scale(1.18) rotate(-6deg)}}
#bottom-navigation-bar button[id^="bottom-"].font-bold svg,#bottom-navigation-bar button[id^="bottom-"].font-extrabold svg{border-color:rgba(245,158,11,.68)!important;box-shadow:0 8px 20px rgba(245,158,11,.20),0 0 0 3px rgba(245,158,11,.08),inset 0 1px 0 rgba(255,255,255,.22)}
#bottom-navigation-bar button[id^="bottom-"]>span{transition:transform .25s ease,color .25s ease,letter-spacing .25s ease}
@media (hover:hover) and (pointer:fine){#bottom-navigation-bar button[id^="bottom-"]:hover>span{transform:translateY(-1px);letter-spacing:.01em}}
#bottom-navigation-bar button[id^="bottom-"]:active svg{transform:scale(.92);transition-duration:.10s}
@media (prefers-reduced-motion:reduce){#bottom-navigation-bar button[id^="bottom-"] svg,#bottom-navigation-bar button[id^="bottom-"]>span{transition:none!important;transform:none!important}}

/* =========================================================
   V6 — PROFILE DROPDOWN CONTRAST FIX
   Kişisel Bilgiler / Şifre & Güvenlik alt açıklamaları
   ========================================================= */
/* These are the two amber-hover profile dropdown actions. */
button.hover\:bg-amber-500 > div.flex-1 > span.text-\[10px\] {
  color: #64748b !important;
  opacity: 1 !important;
  transition: color .2s ease, opacity .2s ease;
}
.dark button.hover\:bg-amber-500 > div.flex-1 > span.text-\[10px\] {
  color: #cbd5e1 !important;
}
button.hover\:bg-amber-500:hover > div.flex-1 > span.text-\[10px\],
.dark button.hover\:bg-amber-500:hover > div.flex-1 > span.text-\[10px\] {
  color: #1e293b !important;
  opacity: .96 !important;
}
/* Keep the main line high-contrast over the amber hover background. */
button.hover\:bg-amber-500:hover > div.flex-1 > div {
  color: #0f172a !important;
}

/* =========================================================
   V7 — PROFILE DROPDOWN LOWER ACTIONS CONSISTENCY FIX
   Aktif Tevkil / Mesajlar / Çıkış eski beyaz-gri görünümden çıkarıldı.
   ========================================================= */
#dropdown-user-profile > div.p-2.space-y-1 > button[class*="hover:bg-slate-100"] {
  background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(245,158,11,.025)) !important;
  border: 1px solid rgba(245,158,11,.16) !important;
  color: #334155 !important;
  font-weight: 700 !important;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), background .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease !important;
}
.dark #dropdown-user-profile > div.p-2.space-y-1 > button[class*="hover:bg-slate-100"] {
  background: linear-gradient(135deg, rgba(245,158,11,.11), rgba(15,23,42,.42)) !important;
  border-color: rgba(245,158,11,.18) !important;
  color: #e2e8f0 !important;
}
#dropdown-user-profile > div.p-2.space-y-1 > button[class*="hover:bg-slate-100"] svg {
  color: #f59e0b !important;
  transition: transform .22s ease, color .22s ease, filter .22s ease !important;
}
@media (hover:hover) and (pointer:fine) {
  #dropdown-user-profile > div.p-2.space-y-1 > button[class*="hover:bg-slate-100"]:hover {
    background: linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%) !important;
    border-color: rgba(245,158,11,.76) !important;
    color: #0f172a !important;
    transform: translateX(4px) scale(1.015) !important;
    box-shadow: 0 9px 20px rgba(245,158,11,.18) !important;
  }
  #dropdown-user-profile > div.p-2.space-y-1 > button[class*="hover:bg-slate-100"]:hover svg {
    color: #0f172a !important;
    transform: scale(1.15);
    filter: drop-shadow(0 2px 4px rgba(15,23,42,.12));
  }
}

/* Logout keeps a distinct security/red identity but no longer looks like a plain row. */
#dropdown-user-profile > div.p-2.space-y-1 > button[class*="text-rose-600"] {
  background: linear-gradient(135deg, rgba(244,63,94,.075), rgba(244,63,94,.02)) !important;
  border: 1px solid rgba(244,63,94,.13) !important;
  border-radius: 12px !important;
}
.dark #dropdown-user-profile > div.p-2.space-y-1 > button[class*="text-rose-600"] {
  background: linear-gradient(135deg, rgba(244,63,94,.12), rgba(76,5,25,.11)) !important;
  border-color: rgba(244,63,94,.18) !important;
}
@media (hover:hover) and (pointer:fine) {
  #dropdown-user-profile > div.p-2.space-y-1 > button[class*="text-rose-600"]:hover {
    background: linear-gradient(135deg, rgba(244,63,94,.16), rgba(225,29,72,.09)) !important;
    transform: translateX(4px) scale(1.015) !important;
    box-shadow: 0 8px 20px rgba(244,63,94,.10) !important;
  }
}

/* =========================================================
   V8 — PROFILE DROPDOWN EQUAL VISUAL LANGUAGE
   All non-destructive actions use the same amber-tinted card.
   ========================================================= */
#dropdown-user-profile > div.p-2.space-y-1 > button:not([class*="text-rose-600"]) {
  background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(245,158,11,.025)) !important;
  border: 1px solid rgba(245,158,11,.16) !important;
  color: #334155 !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), background .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease !important;
}

.dark #dropdown-user-profile > div.p-2.space-y-1 > button:not([class*="text-rose-600"]) {
  background: linear-gradient(135deg, rgba(245,158,11,.11), rgba(15,23,42,.42)) !important;
  border-color: rgba(245,158,11,.18) !important;
  color: #e2e8f0 !important;
}

#dropdown-user-profile > div.p-2.space-y-1 > button:not([class*="text-rose-600"]) svg {
  color: #f59e0b !important;
}

/* Description lines stay readable in the resting state. */
#dropdown-user-profile > div.p-2.space-y-1 > button:not([class*="text-rose-600"]) span.text-\[10px\] {
  color: #64748b !important;
  opacity: 1 !important;
}
.dark #dropdown-user-profile > div.p-2.space-y-1 > button:not([class*="text-rose-600"]) span.text-\[10px\] {
  color: #cbd5e1 !important;
}

@media (hover:hover) and (pointer:fine) {
  #dropdown-user-profile > div.p-2.space-y-1 > button:not([class*="text-rose-600"]):hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    border-color: rgba(245,158,11,.78) !important;
    color: #0f172a !important;
    transform: translateX(4px) scale(1.015) !important;
    box-shadow: 0 9px 20px rgba(245,158,11,.18) !important;
  }

  #dropdown-user-profile > div.p-2.space-y-1 > button:not([class*="text-rose-600"]):hover svg,
  #dropdown-user-profile > div.p-2.space-y-1 > button:not([class*="text-rose-600"]):hover div,
  #dropdown-user-profile > div.p-2.space-y-1 > button:not([class*="text-rose-600"]):hover span {
    color: #0f172a !important;
  }
}

/* =========================================================
   V9 — DESKTOP TOP NAV / BOTTOM-NAV VISUAL LANGUAGE
   Anasayfa / İletişim / Hakkımızda are now separate premium
   navigation cards with icon badges. Functional handlers unchanged.
   ========================================================= */
@media (min-width:1024px) {
  header nav.hidden.lg\:flex {
    gap: 8px !important;
    margin-left: 16px !important;
    padding-left: 16px !important;
    border-left-color: rgba(148,163,184,.16) !important;
    overflow: visible !important;
  }

  header nav.hidden.lg\:flex > button {
    min-width: 108px;
    min-height: 46px;
    padding: 6px 12px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: #e2e8f0 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .01em;
    background: linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018)) !important;
    border: 1px solid rgba(148,163,184,.16) !important;
    box-shadow: 0 6px 16px rgba(2,6,23,.14), inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .26s cubic-bezier(.2,.8,.2,1), background .26s ease, border-color .26s ease, box-shadow .26s ease, color .26s ease !important;
  }

  /* Remove the old underline effect from this specific navigation. */
  header nav.hidden.lg\:flex > button::after {
    display: none !important;
    content: none !important;
  }

  /* Existing home/globe icon gets the same badge treatment as bottom nav. */
  header nav.hidden.lg\:flex > button:first-child svg {
    width: 17px !important;
    height: 17px !important;
    padding: 5px;
    box-sizing: content-box;
    border-radius: 10px;
    color: #fbbf24 !important;
    background: linear-gradient(145deg,rgba(245,158,11,.22),rgba(245,158,11,.055));
    border: 1px solid rgba(245,158,11,.30);
    box-shadow: 0 5px 13px rgba(245,158,11,.10), inset 0 1px 0 rgba(255,255,255,.10);
    transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s ease, background .26s ease;
  }

  /* Contact and About do not contain icon components in the bundle,
     therefore their decorative line icons are CSS-only. */
  header nav.hidden.lg\:flex > button:nth-child(2)::before,
  header nav.hidden.lg\:flex > button:nth-child(3)::before {
    content: "";
    width: 17px;
    height: 17px;
    padding: 5px;
    box-sizing: content-box;
    border-radius: 10px;
    background-color: rgba(255,255,255,.02);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px 17px;
    border: 1px solid rgba(59,130,246,.28);
    box-shadow: 0 5px 13px rgba(59,130,246,.09), inset 0 1px 0 rgba(255,255,255,.08);
    transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s ease, border-color .26s ease;
    flex: 0 0 auto;
  }

  /* message/contact line icon */
  header nav.hidden.lg\:flex > button:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3Cpath d='M8 8h8M8 12h5'/%3E%3C/svg%3E");
    background-color: rgba(59,130,246,.10);
  }

  /* about / information line icon */
  header nav.hidden.lg\:flex > button:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
    background-color: rgba(139,92,246,.10);
    border-color: rgba(139,92,246,.27);
    box-shadow: 0 5px 13px rgba(139,92,246,.09), inset 0 1px 0 rgba(255,255,255,.08);
  }

  @media (hover:hover) and (pointer:fine) {
    header nav.hidden.lg\:flex > button:hover {
      color: #fff !important;
      transform: translateY(-4px) scale(1.045) !important;
      background: linear-gradient(145deg,rgba(245,158,11,.14),rgba(255,255,255,.035)) !important;
      border-color: rgba(245,158,11,.46) !important;
      box-shadow: 0 13px 26px rgba(2,6,23,.22), 0 0 0 3px rgba(245,158,11,.06), inset 0 1px 0 rgba(255,255,255,.10) !important;
      text-shadow: none !important;
    }

    header nav.hidden.lg\:flex > button:first-child:hover svg,
    header nav.hidden.lg\:flex > button:nth-child(2):hover::before,
    header nav.hidden.lg\:flex > button:nth-child(3):hover::before {
      transform: translateY(-2px) scale(1.16) rotate(-4deg);
      border-color: rgba(245,158,11,.55);
      box-shadow: 0 9px 18px rgba(245,158,11,.17), 0 0 0 3px rgba(245,158,11,.06);
    }

    header nav.hidden.lg\:flex > button:nth-child(2):hover::before {
      transform: translateY(-2px) scale(1.16) rotate(5deg);
    }
  }

  header nav.hidden.lg\:flex > button:active {
    transform: translateY(-1px) scale(.98) !important;
  }

  header nav.hidden.lg\:flex > button:focus-visible {
    outline: none !important;
    border-color: rgba(245,158,11,.62) !important;
    box-shadow: 0 0 0 4px rgba(245,158,11,.13), 0 9px 20px rgba(2,6,23,.18) !important;
  }
}

/* ================================================================
   Tevkil360 — Glass Header Refresh v10
   Görsel katman בלבד: mevcut React/JS/Firebase fonksiyonlarına dokunmaz.
   Referans: seçilen 02 “Şeffaf / Cam Efektli Menü”.
   ================================================================ */
@media (min-width:1024px){
  /* Header artık sayfadan ayrışan, yarı şeffaf premium bir bar */
  .sticky.top-0.bg-slate-900{
    top:14px!important;
    width:min(1440px,calc(100% - 32px))!important;
    margin:0 auto!important;
    border:1px solid rgba(255,255,255,.72)!important;
    border-radius:20px!important;
    background:rgba(255,255,255,.84)!important;
    color:#0b1220!important;
    -webkit-backdrop-filter:blur(22px) saturate(165%)!important;
    backdrop-filter:blur(22px) saturate(165%)!important;
    box-shadow:0 18px 55px rgba(15,23,42,.13), inset 0 1px 0 rgba(255,255,255,.85)!important;
    overflow:visible!important;
  }
  .sticky.top-0.bg-slate-900 > div{
    max-width:none!important;
    height:72px!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }
  /* marka */
  .sticky.top-0.bg-slate-900 .text-white{color:#0b1220!important}
  .sticky.top-0.bg-slate-900 .text-slate-300{color:#475569!important}
  .sticky.top-0.bg-slate-900 .text-slate-400{color:#64748b!important}
  .sticky.top-0.bg-slate-900 .text-amber-400{color:#e98b00!important}
  .sticky.top-0.bg-slate-900 img{filter:none!important}

  /* hamburger: masaüstünde daha sakin bir ikon kutusu */
  #btn-hamburger-menu{
    width:40px!important;height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important;
    color:#334155!important;background:rgba(248,250,252,.78)!important;border:1px solid rgba(148,163,184,.22)!important;
    box-shadow:0 5px 16px rgba(15,23,42,.05)!important;
  }
  #btn-hamburger-menu:hover{color:#d97706!important;background:#fff7ed!important;border-color:rgba(245,158,11,.35)!important}

  /* mevcut navigasyonun fonksiyonlarını koruyup görünümünü modernleştir */
  .sticky.top-0.bg-slate-900 nav.hidden.lg\:flex{
    border-left:0!important;margin-left:18px!important;padding-left:0!important;gap:4px!important;
    background:rgba(248,250,252,.58)!important;border:1px solid rgba(148,163,184,.14)!important;
    padding:5px!important;border-radius:14px!important;
  }
  .sticky.top-0.bg-slate-900 nav.hidden.lg\:flex button{
    min-height:38px!important;padding:0 14px!important;border-radius:10px!important;
    color:#334155!important;font-size:12px!important;font-weight:750!important;position:relative!important;
  }
  .sticky.top-0.bg-slate-900 nav.hidden.lg\:flex button:hover{
    color:#c66f00!important;background:rgba(245,158,11,.10)!important;transform:translateY(-1px)!important;
  }
  .sticky.top-0.bg-slate-900 nav.hidden.lg\:flex button:first-child{
    color:#c66f00!important;background:rgba(245,158,11,.09)!important;
  }
  .sticky.top-0.bg-slate-900 nav.hidden.lg\:flex button:first-child:after{
    content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:99px;background:#f59e0b;
  }

  /* rol rozeti */
  .sticky.top-0.bg-slate-900 .bg-slate-800.border.border-slate-700{
    background:rgba(248,250,252,.72)!important;border-color:rgba(148,163,184,.20)!important;color:#334155!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important;
  }

  /* bildirim */
  #btn-notifications-bell{color:#334155!important;background:rgba(255,255,255,.55)!important;border:1px solid rgba(148,163,184,.18)!important}
  #btn-notifications-bell:hover{color:#d97706!important;background:#fff7ed!important}

  /* profil fotoğrafını glass bar içinde daha rafine göster */
  .sticky.top-0.bg-slate-900 button:has(img[alt*="Profil"]),
  .sticky.top-0.bg-slate-900 button:has(.overflow-hidden img){border-radius:14px!important}

  /* giriş CTA */
  #btn-header-login{
    min-height:42px!important;padding:0 18px!important;border-radius:13px!important;
    background:linear-gradient(135deg,#ffb21a,#f59e0b 58%,#e98a00)!important;
    box-shadow:0 10px 25px rgba(245,158,11,.26),inset 0 1px 0 rgba(255,255,255,.42)!important;
  }

  /* header'ın sayfayı ezmemesi için üst nefes */
  body{padding-top:2px!important}
}

/* Mobil uygulamadaki güçlü lacivert header korunur; yalnızca daha rafine edilir. */
@media (max-width:1023px){
  .sticky.top-0.bg-slate-900{
    background:rgba(4,10,24,.97)!important;
    border-bottom:1px solid rgba(245,158,11,.15)!important;
    box-shadow:0 10px 30px rgba(2,6,23,.18)!important;
  }
  .sticky.top-0.bg-slate-900 > div{height:68px!important}
  #btn-hamburger-menu,#btn-notifications-bell{border-radius:14px!important}
}

/* ================================================================
   Tevkil360 — Visual Polish v11
   09.09.2026 | Yalnızca görünüm. React/Firebase/route/handler değişmedi.
   - Üst menü sayfa hizasına daraltıldı
   - Anadolu Adalet Sarayı görseli cam menü arkasına eklendi
   - Profil dropdown sadeleştirildi
   - Profil sayfası mobil uygulamanın tasarım diline yaklaştırıldı
   ================================================================ */

@media (min-width:1024px){
  /* Header dış sınırı artık ana içerikle aynı max-width sisteminde. */
  .sticky.top-0.bg-slate-900{
    width:min(1280px,calc(100% - 48px))!important;
    min-height:78px!important;
    top:16px!important;
    border-radius:22px!important;
    border:1px solid rgba(255,255,255,.72)!important;
    background-color:rgba(255,255,255,.76)!important;
    background-image:
      linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.80) 42%,rgba(255,255,255,.70) 100%),
      url("https://upload.wikimedia.org/wikipedia/commons/0/03/%C4%B0stanbulAnadoluJusticePalace2.jpg")!important;
    background-size:cover!important;
    background-position:center 56%!important;
    background-repeat:no-repeat!important;
    box-shadow:0 18px 48px rgba(15,23,42,.14),0 2px 8px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.88)!important;
    -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
    backdrop-filter:blur(18px) saturate(145%)!important;
  }
  .sticky.top-0.bg-slate-900 > div{
    max-width:1280px!important;
    width:100%!important;
    height:76px!important;
    padding-left:32px!important;
    padding-right:32px!important;
  }

  /* Cam bar içinde menü biraz daha ince ve bütünleşik. */
  .sticky.top-0.bg-slate-900 nav.hidden.lg\:flex{
    background:rgba(255,255,255,.48)!important;
    border-color:rgba(255,255,255,.62)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65)!important;
  }
  .sticky.top-0.bg-slate-900 nav.hidden.lg\:flex button{
    color:#293548!important;
  }
  .sticky.top-0.bg-slate-900 nav.hidden.lg\:flex button:hover{
    background:rgba(255,247,237,.82)!important;
    color:#b96300!important;
  }

  #btn-notifications-bell,
  #btn-user-profile-toggle,
  .sticky.top-0.bg-slate-900 .hidden.sm\:flex.items-center.gap-1\.5{
    -webkit-backdrop-filter:blur(10px) saturate(135%);
    backdrop-filter:blur(10px) saturate(135%);
  }
}

/* ---------------- Profile dropdown: daha temiz / uygulamayla uyumlu ---------------- */
#dropdown-user-profile{
  width:min(340px,calc(100vw - 24px))!important;
  border-radius:20px!important;
  border:1px solid rgba(148,163,184,.22)!important;
  background:rgba(255,255,255,.97)!important;
  box-shadow:0 26px 70px rgba(15,23,42,.22),0 2px 8px rgba(15,23,42,.06)!important;
  overflow:hidden!important;
}
#dropdown-user-profile > div:first-child{
  padding:16px!important;
  background:linear-gradient(135deg,#0b1325 0%,#111c33 100%)!important;
  border-bottom:1px solid rgba(245,158,11,.18)!important;
}
#dropdown-user-profile > div:first-child .w-12.h-12{
  width:48px!important;height:48px!important;border-radius:14px!important;
  border:2px solid rgba(245,158,11,.85)!important;
}
#dropdown-user-profile > div.p-2.space-y-1{
  padding:9px!important;
  background:#fff!important;
}
#dropdown-user-profile > div.p-2.space-y-1 > button:not([class*="text-rose-600"]){
  min-height:52px!important;
  margin:2px 0!important;
  padding:10px 12px!important;
  border-radius:13px!important;
  border:1px solid transparent!important;
  background:#fff!important;
  color:#334155!important;
  box-shadow:none!important;
}
#dropdown-user-profile > div.p-2.space-y-1 > button:not([class*="text-rose-600"]) svg{
  width:17px!important;height:17px!important;
  color:#d97706!important;
  padding:7px!important;
  box-sizing:content-box!important;
  border-radius:11px!important;
  background:rgba(245,158,11,.10)!important;
  border:1px solid rgba(245,158,11,.13)!important;
}
#dropdown-user-profile > div.p-2.space-y-1 > button:not([class*="text-rose-600"]) span.text-\[10px\]{
  color:#7b8798!important;
}
@media (hover:hover) and (pointer:fine){
  #dropdown-user-profile > div.p-2.space-y-1 > button:not([class*="text-rose-600"]):hover{
    background:#fff8ec!important;
    border-color:rgba(245,158,11,.20)!important;
    color:#111827!important;
    transform:translateX(2px)!important;
    box-shadow:0 7px 18px rgba(15,23,42,.055)!important;
  }
  #dropdown-user-profile > div.p-2.space-y-1 > button:not([class*="text-rose-600"]):hover svg{
    color:#b96300!important;
    background:rgba(245,158,11,.17)!important;
    transform:scale(1.04)!important;
  }
  #dropdown-user-profile > div.p-2.space-y-1 > button:not([class*="text-rose-600"]):hover div,
  #dropdown-user-profile > div.p-2.space-y-1 > button:not([class*="text-rose-600"]):hover span{
    color:inherit!important;
  }
  #dropdown-user-profile > div.p-2.space-y-1 > button:not([class*="text-rose-600"]):hover span.text-\[10px\]{
    color:#6b7280!important;
  }
}
#dropdown-user-profile > div.p-2.space-y-1 > button[class*="text-rose-600"]{
  min-height:48px!important;
  margin-top:6px!important;
  padding:10px 12px!important;
  border-radius:13px!important;
  background:#fff6f7!important;
  border:1px solid rgba(244,63,94,.10)!important;
}

/* ---------------- Profile page: compact, light, professional ---------------- */
#profile-page{
  max-width:1180px;
  margin:0 auto;
}
#profile-hero{
  padding:22px 24px!important;
  border-radius:24px!important;
  color:#0f172a!important;
  border:1px solid rgba(148,163,184,.20)!important;
  background:
    radial-gradient(circle at 96% 10%,rgba(245,158,11,.12),transparent 220px),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,252,255,.98))!important;
  box-shadow:0 18px 46px rgba(15,23,42,.085),0 1px 2px rgba(15,23,42,.04)!important;
  overflow:visible!important;
}
#profile-hero > .absolute{opacity:.16!important}
#profile-hero .text-white{color:#0f172a!important}
#profile-hero .text-slate-300{color:#64748b!important}
#profile-hero .text-slate-400{color:#7b8798!important}
#profile-hero .text-amber-300,#profile-hero .text-amber-400{color:#c97300!important}
#profile-hero .bg-slate-800{
  background:#f8fafc!important;
  border-color:rgba(148,163,184,.20)!important;
  color:#334155!important;
}
#profile-hero > .relative.z-10 > .flex{
  align-items:center!important;
  gap:20px!important;
}
#profile-hero > .relative.z-10 > .flex > div:first-child > div:first-child{
  width:88px!important;
  height:88px!important;
  border-radius:21px!important;
  border-width:2px!important;
  box-shadow:0 10px 26px rgba(15,23,42,.13)!important;
}
#profile-hero h1{
  font-family:inherit!important;
  font-size:26px!important;
  letter-spacing:-.035em!important;
  color:#0f172a!important;
}
#profile-hero h1::after{display:none!important}
#profile-hero .flex.sm\:flex-col.gap-2{
  min-width:126px;
}
#profile-hero .flex.sm\:flex-col.gap-2 > button{
  background:#fff!important;
  color:#334155!important;
  border:1px solid rgba(148,163,184,.22)!important;
  box-shadow:0 5px 14px rgba(15,23,42,.045)!important;
}
#profile-hero .flex.sm\:flex-col.gap-2 > button:hover{
  background:#fff8ec!important;
  color:#b96300!important;
  border-color:rgba(245,158,11,.25)!important;
}
#profile-hero .mt-8.pt-4.border-t{
  margin-top:18px!important;
  padding:6px!important;
  border:1px solid rgba(148,163,184,.16)!important;
  border-radius:16px!important;
  background:#f7f9fc!important;
  gap:5px!important;
  overflow-x:auto!important;
}
#profile-hero .mt-8.pt-4.border-t > button{
  min-height:40px!important;
  padding:8px 13px!important;
  border-radius:11px!important;
  color:#5f6d80!important;
  background:transparent!important;
  box-shadow:none!important;
}
#profile-hero .mt-8.pt-4.border-t > button.bg-amber-500{
  color:#172033!important;
  background:linear-gradient(135deg,#ffbd2f,#f59e0b)!important;
  box-shadow:0 7px 18px rgba(245,158,11,.22)!important;
}
#profile-hero .mt-8.pt-4.border-t > button:hover:not(.bg-amber-500){
  color:#b96300!important;
  background:#fff!important;
}

#profile-form-card{
  padding:26px!important;
  border-radius:24px!important;
  border:1px solid rgba(148,163,184,.18)!important;
  background:#fff!important;
  box-shadow:0 16px 42px rgba(15,23,42,.07),0 1px 2px rgba(15,23,42,.035)!important;
}
#profile-form-card > div:first-child{
  margin-bottom:20px!important;
  padding-bottom:16px!important;
}
#profile-form-card > div:first-child h2{
  font-size:18px!important;
}
#profile-form-card form > div:first-child{
  padding:16px!important;
  background:linear-gradient(180deg,#fafbfc,#f7f9fc)!important;
  border:1px dashed rgba(148,163,184,.30)!important;
  border-radius:18px!important;
}
#profile-form-card form > div:first-child .w-20.h-20{
  width:68px!important;
  height:68px!important;
  border-radius:17px!important;
}
#profile-form-card input,
#profile-form-card select,
#profile-form-card textarea{
  min-height:48px!important;
  background:#fbfcfe!important;
  border-color:rgba(148,163,184,.26)!important;
  border-radius:13px!important;
}
#profile-form-card input:focus,
#profile-form-card select:focus,
#profile-form-card textarea:focus{
  background:#fff!important;
}

.dark #profile-hero{
  color:#f8fafc!important;
  background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(10,16,29,.98))!important;
  border-color:rgba(148,163,184,.16)!important;
}
.dark #profile-hero .text-white,.dark #profile-hero h1{color:#fff!important}
.dark #profile-hero .text-slate-300{color:#cbd5e1!important}
.dark #profile-hero .text-slate-400{color:#94a3b8!important}
.dark #profile-hero .bg-slate-800{background:rgba(30,41,59,.72)!important;color:#e2e8f0!important}
.dark #profile-hero .mt-8.pt-4.border-t{background:rgba(15,23,42,.70)!important;border-color:rgba(148,163,184,.14)!important}
.dark #profile-form-card{background:#0f172a!important;border-color:rgba(148,163,184,.14)!important}
.dark #profile-form-card form > div:first-child{background:rgba(30,41,59,.45)!important;border-color:rgba(148,163,184,.16)!important}
.dark #profile-form-card input,.dark #profile-form-card select,.dark #profile-form-card textarea{background:rgba(30,41,59,.72)!important}

@media (max-width:1023px){
  #profile-page{max-width:none}
  #profile-hero{padding:18px!important;border-radius:20px!important}
  #profile-hero > .relative.z-10 > .flex{align-items:center!important}
  #profile-form-card{padding:18px!important;border-radius:20px!important}
}

/* Wikimedia Commons kaynak bilgisi CSS içinde de tutuluyor:
   İstanbulAnadoluJusticePalace2.jpg — Metuboy — CC BY-SA 4.0
   https://commons.wikimedia.org/wiki/File:%C4%B0stanbulAnadoluJusticePalace2.jpg
*/

/* ================================================================
   V12 — Sol menü + marka görünürlüğü + alt navigasyon uyumu
   Yalnızca görsel katman. React/Firebase event/route koduna dokunmaz.
   ================================================================ */

/* Hamburger / sol çekmece: üst menüdeki lacivert + turuncu dil */
#drawer-hamburger-menu{
  width:min(360px,92vw)!important;
  max-width:360px!important;
  background:linear-gradient(180deg,#0b1427 0%,#0d172b 55%,#09111f 100%)!important;
  border-right:1px solid rgba(245,158,11,.22)!important;
  box-shadow:24px 0 70px rgba(2,6,23,.38)!important;
}
#drawer-hamburger-menu > div:first-child{
  min-height:84px!important;
  padding:16px 18px!important;
  background:linear-gradient(135deg,rgba(8,15,29,.98),rgba(16,30,52,.96))!important;
  border-bottom:1px solid rgba(245,158,11,.18)!important;
}
/* Logo component's default text is dark in light mode; force readable brand in dark drawer */
#drawer-hamburger-menu > div:first-child .font-serif{
  color:#fff!important;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;
  font-size:19px!important;
  font-weight:900!important;
  letter-spacing:-.03em!important;
  white-space:nowrap!important;
}
#drawer-hamburger-menu > div:first-child .font-serif > span{color:#f59e0b!important}
#drawer-hamburger-menu > div:first-child .uppercase{
  color:#f6b84b!important;
  opacity:.9!important;
  font-size:8px!important;
  letter-spacing:.08em!important;
}
#drawer-hamburger-menu > div:first-child img{
  width:46px!important;height:46px!important;border-radius:13px!important;
  border:1px solid rgba(245,158,11,.55)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.28)!important;
}
#drawer-hamburger-menu > div:nth-child(2){
  background:linear-gradient(135deg,rgba(18,33,58,.96),rgba(12,23,43,.96))!important;
  border-bottom:1px solid rgba(245,158,11,.13)!important;
}
#drawer-hamburger-menu button,
#drawer-hamburger-menu a{
  border:1px solid transparent!important;
  border-radius:12px!important;
}
#drawer-hamburger-menu button:hover,
#drawer-hamburger-menu a:hover{
  background:rgba(255,255,255,.065)!important;
  border-color:rgba(245,158,11,.13)!important;
  transform:translateX(2px);
}
#drawer-hamburger-menu button[class*="bg-slate-800"],
#drawer-hamburger-menu a[class*="bg-slate-800"]{
  background:linear-gradient(90deg,rgba(245,158,11,.18),rgba(245,158,11,.06))!important;
  border-color:rgba(245,158,11,.22)!important;
  box-shadow:inset 3px 0 0 #f59e0b!important;
}
#drawer-hamburger-menu .text-slate-300{color:#dbe4f0!important}
#drawer-hamburger-menu .text-slate-400{color:#93a4ba!important}
#drawer-hamburger-menu .text-amber-400,
#drawer-hamburger-menu .text-amber-300{color:#f6b84b!important}

/* Alt navigasyon: üst menünün cam/kurumsal diliyle aynı; mobil işlevler değişmez */
#bottom-navigation-bar{
  left:50%!important;
  right:auto!important;
  width:min(1180px,calc(100% - 32px))!important;
  transform:translateX(-50%)!important;
  bottom:12px!important;
  border:1px solid rgba(148,163,184,.20)!important;
  border-top:1px solid rgba(245,158,11,.28)!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.92)!important;
  -webkit-backdrop-filter:blur(18px) saturate(150%)!important;
  backdrop-filter:blur(18px) saturate(150%)!important;
  box-shadow:0 16px 45px rgba(15,23,42,.13),0 1px 0 rgba(255,255,255,.8) inset!important;
  overflow:visible!important;
}
#bottom-navigation-bar button[id^="bottom-"]{
  color:#718096!important;
  border-radius:14px!important;
  transition:color .2s ease,background .2s ease,transform .2s ease!important;
}
#bottom-navigation-bar button[id^="bottom-"]:hover{
  color:#0f172a!important;
  background:rgba(245,158,11,.055)!important;
}
#bottom-navigation-bar button[id^="bottom-"].font-bold,
#bottom-navigation-bar button[id^="bottom-"].font-extrabold{
  color:#c66d00!important;
}
#bottom-navigation-bar button[id^="bottom-"] svg{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  color:currentColor!important;
}
#bottom-nav-yeni-talep svg{
  background:linear-gradient(145deg,#ffb31a,#e98a00)!important;
  color:#fff!important;
  border:1px solid rgba(217,119,6,.28)!important;
  box-shadow:0 8px 20px rgba(245,158,11,.30)!important;
}

/* Desktop: content/header ile aynı optik genişlik. Mobile: app görünümü tam genişlik. */
@media (min-width:1024px){
  #bottom-navigation-bar{width:min(1180px,calc(100% - 64px))!important}
}
@media (max-width:767px){
  #bottom-navigation-bar{
    left:0!important;right:0!important;bottom:0!important;
    width:100%!important;transform:none!important;
    border-left:0!important;border-right:0!important;border-bottom:0!important;
    border-radius:0!important;
    background:rgba(255,255,255,.96)!important;
  }
  #drawer-hamburger-menu{width:min(340px,88vw)!important}
  #drawer-hamburger-menu > div:first-child .font-serif{font-size:18px!important}
}
.dark #bottom-navigation-bar{
  background:rgba(10,18,33,.94)!important;
  border-color:rgba(245,158,11,.18)!important;
}
.dark #bottom-navigation-bar button[id^="bottom-"]{color:#9aa9bd!important}
.dark #bottom-navigation-bar button[id^="bottom-"].font-bold,
.dark #bottom-navigation-bar button[id^="bottom-"].font-extrabold{color:#f6b84b!important}

/* ================================================================
   V13 — Footer theme + drawer brand/viewport reliability
   10.09.2026 | CSS-only visual/fixed-position patch.
   Existing React/Firebase routes, click handlers and data logic untouched.
   ================================================================ */

/* 1) Public website footer / legal links — same navy + amber language */
footer.py-8.bg-slate-950{
  position:relative!important;
  margin-top:24px!important;
  padding:28px 0 30px!important;
  color:#cbd5e1!important;
  border-top:1px solid rgba(245,158,11,.38)!important;
  background:
    linear-gradient(90deg,rgba(5,12,25,.975),rgba(12,25,46,.955),rgba(5,12,25,.975)),
    url("https://upload.wikimedia.org/wikipedia/commons/0/03/%C4%B0stanbulAnadoluJusticePalace2.jpg") center 62%/cover no-repeat!important;
  box-shadow:0 -16px 42px rgba(15,23,42,.10),inset 0 1px 0 rgba(255,255,255,.035)!important;
  overflow:hidden!important;
}
footer.py-8.bg-slate-950::before{
  content:"";
  position:absolute;
  left:50%;top:0;
  width:min(1180px,calc(100% - 32px));
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(251,191,36,.92),transparent);
  pointer-events:none;
}
footer.py-8.bg-slate-950 > div.max-w-7xl{
  position:relative!important;
  z-index:1!important;
  width:min(1180px,calc(100% - 32px))!important;
  max-width:1180px!important;
  padding:14px 18px!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:20px!important;
  background:rgba(8,17,32,.62)!important;
  -webkit-backdrop-filter:blur(14px) saturate(125%)!important;
  backdrop-filter:blur(14px) saturate(125%)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
/* Footer brand: white TEVKİL + amber 360, guaranteed contrast. */
footer.py-8.bg-slate-950 .font-serif.text-slate-900,
footer.py-8.bg-slate-950 .font-serif{
  color:#f8fafc!important;
  -webkit-text-fill-color:#f8fafc!important;
  text-shadow:0 2px 14px rgba(0,0,0,.28)!important;
}
footer.py-8.bg-slate-950 .font-serif > span,
footer.py-8.bg-slate-950 .text-amber-500,
footer.py-8.bg-slate-950 .text-amber-600{
  color:#f6a50b!important;
  -webkit-text-fill-color:#f6a50b!important;
}
footer.py-8.bg-slate-950 .uppercase{
  color:#e8b758!important;
  opacity:.92!important;
}
footer.py-8.bg-slate-950 .flex.flex-wrap.items-center.justify-center{
  gap:8px!important;
}
footer.py-8.bg-slate-950 .flex.flex-wrap.items-center.justify-center > button{
  min-height:36px!important;
  padding:7px 11px!important;
  border-radius:10px!important;
  color:#cbd5e1!important;
  font-weight:700!important;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.065)!important;
  box-shadow:none!important;
}
@media (hover:hover) and (pointer:fine){
  footer.py-8.bg-slate-950 .flex.flex-wrap.items-center.justify-center > button:hover{
    color:#fff!important;
    background:rgba(245,158,11,.12)!important;
    border-color:rgba(245,158,11,.30)!important;
    transform:translateY(-2px)!important;
    box-shadow:0 8px 20px rgba(0,0,0,.14)!important;
  }
}
footer.py-8.bg-slate-950 p{
  color:#94a3b8!important;
  white-space:nowrap;
}

/* 2) Drawer overlay: always anchored to the CURRENT viewport, at any page scroll. */
div.fixed.inset-0.z-50.flex:has(> #drawer-hamburger-menu),
div.fixed.inset-0.z-50.flex:has(#drawer-hamburger-menu){
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:100dvh!important;
  z-index:9999!important;
  overflow:hidden!important;
  margin:0!important;
  transform:none!important;
}
div.fixed.inset-0.z-50.flex:has(#drawer-hamburger-menu) > div.fixed.inset-0{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
}
#drawer-hamburger-menu{
  position:fixed!important;
  top:0!important;
  left:0!important;
  bottom:0!important;
  right:auto!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  margin:0!important;
  overflow:hidden!important;
  overscroll-behavior:contain!important;
  z-index:10000!important;
}
/* Drawer sections must shrink correctly so the menu itself scrolls inside viewport. */
#drawer-hamburger-menu > div:first-child,
#drawer-hamburger-menu > div:nth-child(2),
#drawer-hamburger-menu > div:last-child{
  flex-shrink:0!important;
}
#drawer-hamburger-menu > div.flex-1.overflow-y-auto,
#drawer-hamburger-menu > div:nth-child(3){
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable;
}

/* 3) Drawer brand — exact Logo component structure, no dark TEVKİL text. */
#drawer-hamburger-menu > div:first-child > div.inline-flex,
#drawer-hamburger-menu > div:first-child > div:first-child{
  min-width:0!important;
  overflow:visible!important;
}
#drawer-hamburger-menu > div:first-child .font-serif.text-slate-900,
#drawer-hamburger-menu > div:first-child span.font-serif{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  opacity:1!important;
  text-shadow:0 2px 12px rgba(0,0,0,.30)!important;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;
  font-weight:900!important;
  letter-spacing:-.035em!important;
}
#drawer-hamburger-menu > div:first-child .font-serif.text-slate-900 > span,
#drawer-hamburger-menu > div:first-child span.font-serif > span{
  color:#f59e0b!important;
  -webkit-text-fill-color:#f59e0b!important;
  opacity:1!important;
}
#drawer-hamburger-menu > div:first-child .flex.flex-col > span:last-child{
  color:#f4bd59!important;
  -webkit-text-fill-color:#f4bd59!important;
  opacity:.96!important;
}

@media (max-width:767px){
  footer.py-8.bg-slate-950{
    padding:20px 0 calc(92px + env(safe-area-inset-bottom,0px))!important;
  }
  footer.py-8.bg-slate-950 > div.max-w-7xl{
    width:calc(100% - 24px)!important;
    padding:16px!important;
    border-radius:18px!important;
  }
  footer.py-8.bg-slate-950 .flex.flex-wrap.items-center.justify-center > button{
    min-height:34px!important;
    padding:6px 9px!important;
    font-size:11px!important;
  }
  footer.py-8.bg-slate-950 p{white-space:normal!important;text-align:center!important}

  #drawer-hamburger-menu > div:first-child{
    min-height:76px!important;
    padding:12px 14px!important;
  }
  #drawer-hamburger-menu > div:first-child .font-serif.text-slate-900,
  #drawer-hamburger-menu > div:first-child span.font-serif{
    font-size:17px!important;
  }
}

/* ================================================================
   V14 — Bottom nav alignment + drawer truly viewport-fixed
   10.09.2026 | visual/layout patch only
   ================================================================ */

/* Bottom navigation: same light courthouse/glass language as desktop header. */
@media (min-width:768px){
  #bottom-navigation-bar{
    left:50%!important;
    right:auto!important;
    bottom:14px!important;
    width:min(1280px,calc(100% - 48px))!important;
    transform:translateX(-50%)!important;
    border:1px solid rgba(255,255,255,.72)!important;
    border-top:1px solid rgba(245,158,11,.24)!important;
    border-radius:22px!important;
    background-color:rgba(255,255,255,.82)!important;
    background-image:
      linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.87) 44%,rgba(255,255,255,.78) 100%),
      url("https://upload.wikimedia.org/wikipedia/commons/0/03/%C4%B0stanbulAnadoluJusticePalace2.jpg")!important;
    background-size:cover!important;
    background-position:center 72%!important;
    background-repeat:no-repeat!important;
    -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
    backdrop-filter:blur(18px) saturate(145%)!important;
    box-shadow:0 18px 48px rgba(15,23,42,.14),0 2px 8px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.88)!important;
    overflow:visible!important;
  }

  /* Critical fix: old max-w-lg made the icons bunch in the middle. */
  #bottom-navigation-bar > div{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:76px!important;
    margin:0!important;
    padding:0 30px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
  }
  #bottom-navigation-bar > div > button,
  #bottom-navigation-bar > div > div.flex-1{
    flex:1 1 0!important;
    min-width:0!important;
    height:62px!important;
    margin:0!important;
    padding:4px 6px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  #bottom-navigation-bar button[id^="bottom-"]{
    color:#526177!important;
    background:transparent!important;
    border:1px solid transparent!important;
    box-shadow:none!important;
  }
  #bottom-navigation-bar button[id^="bottom-"]:hover{
    color:#b96300!important;
    background:rgba(255,247,237,.78)!important;
    border-color:rgba(245,158,11,.16)!important;
  }
  #bottom-navigation-bar button[id^="bottom-"].font-bold,
  #bottom-navigation-bar button[id^="bottom-"].font-extrabold{
    color:#c66d00!important;
    background:rgba(255,247,237,.72)!important;
  }
  #bottom-navigation-bar button[id^="bottom-"] svg{
    transform:none!important;
    filter:none!important;
  }
  #bottom-navigation-bar button[id^="bottom-"] > span{
    transform:none!important;
  }
  #bottom-nav-yeni-talep{
    margin-top:-10px!important;
  }
}

/* Mobile bottom bar keeps app style, but align all items exactly. */
@media (max-width:767px){
  #bottom-navigation-bar > div{
    width:100%!important;
    max-width:none!important;
    height:68px!important;
    margin:0!important;
    padding:0 8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
  }
  #bottom-navigation-bar > div > button,
  #bottom-navigation-bar > div > div.flex-1{
    flex:1 1 0!important;
    min-width:0!important;
  }
}

/* Drawer: neutralise EVERY ancestor that can turn position:fixed into document-relative. */
html:has(#drawer-hamburger-menu),
body:has(#drawer-hamburger-menu){
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
body:has(#drawer-hamburger-menu) #root,
body:has(#drawer-hamburger-menu) #root *:has(#drawer-hamburger-menu){
  transform:none!important;
  translate:none!important;
  scale:none!important;
  rotate:none!important;
  filter:none!important;
  perspective:none!important;
  contain:none!important;
  will-change:auto!important;
  animation:none!important;
}

/* Overlay itself always fills the CURRENT screen, regardless of page scroll. */
body:has(#drawer-hamburger-menu) div.fixed.inset-0.z-50.flex:has(#drawer-hamburger-menu){
  position:fixed!important;
  inset:0!important;
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  max-height:100dvh!important;
  margin:0!important;
  padding:0!important;
  z-index:2147483000!important;
  overflow:hidden!important;
}
body:has(#drawer-hamburger-menu) div.fixed.inset-0.z-50.flex:has(#drawer-hamburger-menu) > div.fixed.inset-0{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
}
#drawer-hamburger-menu{
  position:absolute!important;
  inset:0 auto 0 0!important;
  top:0!important;
  left:0!important;
  bottom:0!important;
  width:min(360px,90vw)!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  z-index:2147483001!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
#drawer-hamburger-menu > div.flex-1.overflow-y-auto{
  flex:1 1 0!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
}

/* Drawer logo/title visibility: never inherit dark logo text. */
#drawer-hamburger-menu > div:first-child .font-serif,
#drawer-hamburger-menu > div:first-child .font-serif.text-slate-900,
#drawer-hamburger-menu > div:first-child span.font-serif{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
}
#drawer-hamburger-menu > div:first-child .font-serif > span,
#drawer-hamburger-menu > div:first-child span.font-serif > span{
  color:#f59e0b!important;
  -webkit-text-fill-color:#f59e0b!important;
}

/* ================================================================
   V15 — Footer/bottom row alignment patch
   10.09.2026 | visual/layout only
   ================================================================ */

/* Public-site legal/footer navigation: keep all links on one line on desktop. */
@media (min-width: 900px){
  footer.py-8.bg-slate-950 > div.max-w-7xl{
    width:min(1280px,calc(100% - 48px))!important;
    max-width:1280px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:18px!important;
    padding-right:18px!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    align-items:center!important;
    column-gap:18px!important;
  }
  footer.py-8.bg-slate-950 .flex.flex-wrap.items-center.justify-center{
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:center!important;
    align-items:center!important;
    gap:8px!important;
    min-width:0!important;
    white-space:nowrap!important;
  }
  footer.py-8.bg-slate-950 .flex.flex-wrap.items-center.justify-center > button{
    flex:0 0 auto!important;
    white-space:nowrap!important;
    min-width:0!important;
    padding:8px 10px!important;
    border-radius:10px!important;
    font-size:11px!important;
    line-height:1.15!important;
  }
  footer.py-8.bg-slate-950 p{
    white-space:nowrap!important;
    margin:0!important;
    font-size:10px!important;
  }
}

/* At medium laptop widths tighten a little more, still no second row. */
@media (min-width: 900px) and (max-width: 1180px){
  footer.py-8.bg-slate-950 > div.max-w-7xl{
    width:calc(100% - 24px)!important;
    column-gap:10px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  footer.py-8.bg-slate-950 .flex.flex-wrap.items-center.justify-center{
    gap:3px!important;
  }
  footer.py-8.bg-slate-950 .flex.flex-wrap.items-center.justify-center > button{
    padding:7px 6px!important;
    font-size:10px!important;
  }
  footer.py-8.bg-slate-950 p{font-size:9px!important}
}

/* Logged-in bottom quick navigation: every item occupies exactly one equal column. */
#bottom-navigation-bar > div{
  flex-wrap:nowrap!important;
}
#bottom-navigation-bar > div > button,
#bottom-navigation-bar > div > div.flex-1{
  flex:1 1 0!important;
  width:0!important;
  max-width:none!important;
  min-width:0!important;
}
#bottom-navigation-bar button[id^="bottom-"]{
  white-space:nowrap!important;
  overflow:visible!important;
}
#bottom-navigation-bar button[id^="bottom-"] > span{
  white-space:nowrap!important;
  width:auto!important;
  max-width:100%!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1!important;
}

@media (min-width:768px){
  #bottom-navigation-bar > div{
    padding-left:14px!important;
    padding-right:14px!important;
    gap:2px!important;
  }
  #bottom-navigation-bar button[id^="bottom-"]{
    padding-left:3px!important;
    padding-right:3px!important;
  }
  #bottom-navigation-bar button[id^="bottom-"] > span{
    font-size:10.5px!important;
  }
}

/* ================================================================
   Tevkil360 — V16: Mobil Üst Menü (Header) Açık Renk Uyumu
   27.09.2026 | Yalnızca görünüm. React/Firebase/route/handler değişmedi.
   Masaüstünde (1024px+) zaten uygulanan "cam/açık" header stilini,
   telefon genişliğinde (1023px ve altı) de aynı şekilde uyguluyor.
   Önceki blok (satır ~744) bunu kasıtlı olarak lacivert bırakıyordu;
   bu blok dosyanın SONUNDA olduğu için CSS önceliği bunu geçersiz kılar.
   ================================================================ */
@media (max-width:1023px){
  .sticky.top-0.bg-slate-900{
    background:rgba(255,255,255,.92)!important;
    border-bottom:1px solid rgba(226,232,240,.9)!important;
    box-shadow:0 6px 20px rgba(15,23,42,.08)!important;
    color:#0b1220!important;
    -webkit-backdrop-filter:blur(18px) saturate(160%)!important;
    backdrop-filter:blur(18px) saturate(160%)!important;
    padding-top:env(safe-area-inset-top,0px)!important;
  }
  .sticky.top-0.bg-slate-900 > div{height:64px!important}

  /* marka yazısı ve ikincil metinler */
  .sticky.top-0.bg-slate-900 .text-white{color:#0b1220!important}
  .sticky.top-0.bg-slate-900 .text-slate-300{color:#475569!important}
  .sticky.top-0.bg-slate-900 .text-slate-400{color:#64748b!important}
  .sticky.top-0.bg-slate-900 .text-amber-400{color:#e98b00!important}
  .sticky.top-0.bg-slate-900 img{filter:none!important}

  /* hamburger / bildirim butonları */
  #btn-hamburger-menu,#btn-notifications-bell{
    color:#334155!important;
    background:rgba(248,250,252,.85)!important;
    border:1px solid rgba(148,163,184,.25)!important;
    border-radius:14px!important;
  }
  #btn-hamburger-menu:hover,#btn-notifications-bell:hover{
    color:#d97706!important;background:#fff7ed!important;
  }

  /* rol rozeti */
  .sticky.top-0.bg-slate-900 .bg-slate-800.border.border-slate-700{
    background:rgba(248,250,252,.85)!important;border-color:rgba(148,163,184,.25)!important;color:#334155!important;
  }

  /* giriş CTA */
  #btn-header-login{
    background:linear-gradient(135deg,#ffb21a,#f59e0b 58%,#e98a00)!important;
    box-shadow:0 8px 20px rgba(245,158,11,.28)!important;
    color:#1c1305!important;
  }
}

/* ================================================================
   Tevkil360 — V16.1: Profil Dropdown Okunabilirlik Düzeltmesi
   27.09.2026 | Yalnızca görünüm.
   #dropdown-user-profile, header'ın İÇİNDE render edildiği için V16'daki
   ".text-white -> koyu renk" kuralı, dropdown'ın kendi koyu gradyanlı
   profil özeti bölümünü de karartıp okunamaz hale getiriyordu. Bu kural,
   ID önceliği sayesinde SADECE dropdown içinde orijinal açık renkleri
   geri yükler; V16'nın header barındaki diğer değişikliklerini etkilemez.
   ================================================================ */
#dropdown-user-profile{color:#0f172a}
#dropdown-user-profile .text-white{color:#ffffff!important}
#dropdown-user-profile .text-slate-300{color:#cbd5e1!important}
#dropdown-user-profile .text-slate-400{color:#94a3b8!important}
#dropdown-user-profile .text-amber-300{color:#fcd34d!important}

/* ================================================================
   V18 — 06.10.2026
   1) Açılış animasyonu bittiğinde #root'ta "transform" kalmasın.
      animation-fill-mode "both" iken tarayıcı #root'u fixed öğeler için
      kapsayıcı sayıyordu; doğrulama/onay pencereleri ekranın değil
      sayfanın ortasında açılıyordu.
   2) Üst menüdeki profil adı açık zeminde okunur olsun (koyu metin;
      üzerine gelince koyu zemin + beyaz metin).
   ================================================================ */
#root,#root>*{animation-fill-mode:backwards!important}

#btn-user-profile-toggle .text-slate-200{color:#0b1220!important}
#btn-user-profile-toggle .text-amber-400{color:#b45309!important}
#btn-user-profile-toggle:hover .text-slate-200{color:#fff!important}
#btn-user-profile-toggle:hover .text-amber-400{color:#fbbf24!important}
.dark #btn-user-profile-toggle .text-slate-200{color:#f1f5f9!important}
.dark #btn-user-profile-toggle .text-amber-400{color:#fbbf24!important}