@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/Montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/Montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/Montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/Montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   ArızaAbi — Ortak Tasarım Sistemi (High-Velocity Service Utility)
   Stitch mockup setinden uyarlanmış tokenlar + bileşenler.
   ============================================================ */

:root{
  --font-display:'Montserrat',-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',-apple-system,'Segoe UI',sans-serif;

  --bg:#F4F5F7;
  --surface:#FFFFFF;
  --surface-alt:#EDEEF0;
  --border:#E5E7EB;
  --ink:#191C1E;
  --mute:#5A5550;
  --mute-2:#8A8377;

  --primary:#F96302;
  --on-primary:#FFFFFF;
  --primary-dim:#A33E00;
  --primary-tint:rgba(249,99,2,.12);

  --secondary:#1A1A1B;
  --on-secondary:#FFFFFF;

  --success:#1E7D34;
  --success-tint:rgba(30,125,52,.12);
  --danger:#BA1A1A;
  --danger-tint:rgba(186,26,26,.10);

  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:16px;

  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px -4px rgba(0,0,0,.10);

  color-scheme: light;
}

:root[data-theme="dark"]{
  --bg:#121212;
  --surface:#1E1E1E;
  --surface-alt:#2A2A2A;
  --border:#333333;
  --ink:#F0F0F0;
  --mute:#B3B3B3;
  --mute-2:#8C8C8C;
  --primary-tint:rgba(249,99,2,.18);
  --success-tint:rgba(30,125,52,.20);
  --danger-tint:rgba(186,26,26,.20);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 16px -4px rgba(0,0,0,.5);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121212;
    --surface:#1E1E1E;
    --surface-alt:#2A2A2A;
    --border:#333333;
    --ink:#F0F0F0;
    --mute:#B3B3B3;
    --mute-2:#8C8C8C;
    --primary-tint:rgba(249,99,2,.18);
    --success-tint:rgba(30,125,52,.20);
    --danger-tint:rgba(186,26,26,.20);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 4px 16px -4px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--font-display); margin:0; }
a{ color:inherit; }
button{ font-family:var(--font-body); }

/* ---------- Layout shell: masaüstü sabit sidebar / mobil alt bar ---------- */
.app-shell{ min-height:100vh; display:flex; flex-direction:column; }
.app-main{ flex:1; width:100%; max-width:1100px; margin:0 auto; padding:20px 16px 96px; }

.eyebrow{
  font-family:var(--font-body); font-weight:700; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--primary); margin:0 0 8px;
}
.page-title{ font-weight:800; font-size:24px; letter-spacing:-.01em; margin:0 0 4px; }
.page-sub{ color:var(--mute); font-size:13.5px; margin:0 0 20px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:var(--radius-sm); border:none; cursor:pointer;
  font-weight:700; font-size:14px; font-family:var(--font-body); text-decoration:none;
  transition:filter .12s ease;
}
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn:hover:not(:disabled){ filter:brightness(1.06); }
.btn-primary{ background:var(--primary); color:var(--on-primary); }
.btn-secondary{ background:var(--secondary); color:var(--on-secondary); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--border); }
.btn-danger-ghost{ background:transparent; color:var(--danger); border:1.5px solid var(--danger); }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 14px; font-size:12.5px; }

/* ---------- Badges (subtle-fill) ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  white-space:nowrap;
}
.badge-open{ background:var(--danger-tint); color:var(--danger); }
.badge-progress{ background:var(--primary-tint); color:var(--primary-dim); }
.badge-done{ background:var(--success-tint); color:var(--success); }
.badge-neutral{ background:var(--surface-alt); color:var(--mute); }

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:20px; box-shadow:var(--shadow-sm);
}
.card-title{ font-family:var(--font-display); font-weight:700; font-size:15px; margin:0 0 14px; }

.stat-tile{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px 18px; box-shadow:var(--shadow-sm);
}
.stat-tile-icon{
  width:36px; height:36px; border-radius:var(--radius-sm); background:var(--primary-tint);
  display:flex; align-items:center; justify-content:center; margin-bottom:10px;
}
.stat-tile-icon svg{ width:18px; height:18px; stroke:var(--primary-dim); fill:none; stroke-width:2; }
.stat-tile-value{ font-family:var(--font-display); font-weight:800; font-size:26px; line-height:1; }
.stat-tile-label{
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--mute); margin-top:6px;
}

.service-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px 18px; margin-bottom:10px;
}
.service-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; }
.service-card-loc{ font-weight:700; font-size:14.5px; }
.service-card-cat{ display:flex; align-items:center; gap:8px; color:var(--mute); font-size:13px; margin-bottom:6px; }
.service-card-cat svg{ width:16px; height:16px; stroke:var(--primary-dim); fill:none; stroke-width:2; flex:none; }
.service-card-desc{
  background:var(--surface-alt); border-radius:var(--radius-sm); padding:10px 12px;
  font-size:13px; font-style:italic; color:var(--mute); margin:8px 0;
}
.service-card-meta{ font-size:11.5px; color:var(--mute-2); margin-bottom:12px; }

/* ---------- Forms ---------- */
.field{ margin-bottom:14px; }
.field label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mute); margin-bottom:7px;
}
.field input, .field select, .field textarea{
  width:100%; padding:12px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:14px; color:var(--ink); background:var(--surface);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--primary);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--mute-2); }
.form-error{ color:var(--danger); font-size:12px; margin:8px 0 0; display:none; }
.form-success{ color:var(--success); font-size:12px; margin:8px 0 0; display:none; }

/* ---------- Spinner (fotoğraf işleme/yükleme göstergesi) ---------- */
@keyframes spin{ to{ transform:rotate(360deg); } }
.spinner{
  display:inline-block; width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:spin .7s linear infinite; flex:none;
}
.photo-slot-spinner{
  position:absolute; inset:0; border-radius:var(--radius-sm);
  background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center;
}
.photo-slot-spinner .spinner{ width:20px; height:20px; border-width:2.5px; }

/* ---------- Lightbox (fotoğraf galerisi) ---------- */
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:1000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.lightbox-overlay.open{ opacity:1; pointer-events:auto; }
.lightbox-img{
  max-width:92vw; max-height:82vh; object-fit:contain; border-radius:var(--radius-sm);
  touch-action:pan-y;
}
.lightbox-close{
  position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.12); border:none; color:#fff; font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.12); border:none; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-arrow svg{ width:22px; height:22px; stroke:#fff; fill:none; stroke-width:2; }
.lightbox-arrow.prev{ left:12px; }
.lightbox-arrow.next{ right:12px; }
.lightbox-counter{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:#fff; font-size:12.5px; background:rgba(255,255,255,.12); padding:4px 12px; border-radius:999px;
}
@media (max-width:600px){
  .lightbox-arrow{ width:38px; height:38px; }
  .lightbox-close{ width:36px; height:36px; }
}

/* ---------- Table ---------- */
.data-table{ width:100%; border-collapse:collapse; font-size:13px; }
.data-table th{
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--mute); padding:0 12px 10px 0;
}
.data-table td{ background:var(--surface); padding:13px 12px; border-top:1px solid var(--border); }
.data-table tr:first-child td{ border-top:none; }
.data-table tr td:first-child{ border-radius:var(--radius-md) 0 0 var(--radius-md); }
.data-table tr td:last-child{ border-radius:0 var(--radius-md) var(--radius-md) 0; }

.empty-note{
  text-align:center; color:var(--mute); font-size:13px; padding:40px 0; font-weight:500;
}

/* ---------- Theme toggle ---------- */
.theme-toggle{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.theme-toggle svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
.theme-toggle .icon-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{ display:none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{ display:block; }
}

/* ---------- Nav: masaüstü sidebar / mobil alt bar ---------- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  display:flex; background:var(--secondary);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
}
.nav-logo{ display:none; }
.nav-logo-img{ display:block; height:28px; width:auto; margin-bottom:6px; }
.logo-badge{
  display:inline-flex; align-items:center; justify-content:center;
  background:#121212; border-radius:14px; padding:12px 18px;
}
.logo-badge img{ display:block; height:40px; width:auto; }
.nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  text-decoration:none; color:#9a9a9a; font-size:10.5px; font-weight:600; letter-spacing:.02em;
  border-radius:var(--radius-sm);
}
.nav-item svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; }
.nav-item.active{ color:var(--primary); }

@media (min-width:960px){
  .app-shell{ flex-direction:row; }
  .app-main{ max-width:1100px; padding:32px 40px 40px; margin:0 0 0 260px; }
  .bottom-nav{
    left:0; right:auto; top:0; bottom:0; width:260px;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:2px; padding:24px 16px;
  }
  .nav-logo{
    display:block; padding:0 8px 22px;
  }
  .nav-logo-title{
    color:#fff; font-family:var(--font-display); font-weight:800; font-size:24px; letter-spacing:-.01em; line-height:1.1;
  }
  .nav-logo-title span{ color:var(--primary); }
  .nav-logo-sub{
    color:#7a7a7a; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-top:3px;
  }
  .nav-item{
    flex:none; flex-direction:row; justify-content:flex-start; gap:12px;
    padding:9px 14px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600;
  }
  .nav-item.active{ background:var(--primary); color:var(--on-primary); }
  .nav-item svg{ width:18px; height:18px; }
}