/* ============================================================
   MaviKoy Fethiye — Demo Tasarım Sistemi
   Beyaz zemin + mavi tonları. Tüm demo sayfaları bu dosyayı kullanır.
   ============================================================ */

:root{
  --ground:#FFFFFF;
  --tint:#F2F7FC;        /* buz mavisi bölüm zemini */
  --tint-2:#E7F1F9;
  --ink:#0E2E4E;         /* koyu lacivert metin */
  --muted:#54718C;
  --line:#DBE7F1;
  --primary:#0D6EC0;     /* ana mavi */
  --primary-700:#0A5AA0;
  --primary-soft:#E3F0FA;
  --sky:#3FA9E0;         /* açık gök mavisi vurgu */
  --good:#1E8E5A;
  --warn:#C77A1F;
  --danger:#C43D3D;
  --wa:#1FA855;
  --shadow:0 8px 24px rgba(13,60,110,.10);
  --radius:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:16px/1.6 "Segoe UI", system-ui, -apple-system, sans-serif;
}
img{max-width:100%}
a{color:inherit}
h1,h2{font-family:Georgia,"Times New Roman",serif; font-weight:600; line-height:1.15; text-wrap:balance; margin:0}
h3,h4{line-height:1.25; margin:0; letter-spacing:-.01em}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--primary)}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}

:focus-visible{outline:2px solid var(--primary); outline-offset:3px; border-radius:4px}

/* ---------- site header (müşteri) ---------- */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; gap:28px; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; text-decoration:none; letter-spacing:-.01em}
.brand small{font-weight:600; color:var(--primary); font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-top:4px}
.nav-links{display:flex; gap:22px; font-size:14.5px; color:var(--muted); margin-right:auto}
.nav-links a{text-decoration:none}
.nav-links a:hover, .nav-links a.on{color:var(--primary)}
.pills{display:flex; gap:8px; align-items:center}
.pill{
  font-size:12.5px; font-weight:600; border:1px solid var(--line); border-radius:99px;
  padding:5px 12px; background:#fff; color:var(--muted); cursor:pointer; font-family:inherit;
}
.pill.on{background:var(--primary); border-color:var(--primary); color:#fff}

/* ---------- butonlar ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:10px; padding:11px 22px; font:inherit; font-size:15px; font-weight:700;
  cursor:pointer; text-decoration:none; border:1px solid transparent; transition:background .15s, color .15s, border-color .15s;
}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-700)}
.btn-outline{background:transparent; border-color:var(--primary); color:var(--primary)}
.btn-outline:hover{background:var(--primary-soft)}
.btn-ghost{background:transparent; color:var(--muted)}
.btn-ghost:hover{color:var(--ink)}
.btn-lg{padding:14px 28px; font-size:16px}
.btn-sm{padding:7px 14px; font-size:13.5px; border-radius:8px}
.btn-danger{background:transparent; border-color:var(--danger); color:var(--danger)}
.btn-danger:hover{background:#FBEDED}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ---------- kartlar / ürün grid ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:22px}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.photo{
  height:180px; position:relative; display:flex; align-items:end; padding:12px;
  color:#EAF5FE; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
}
.photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(6,34,58,.55))}
.photo span{position:relative; z-index:1; opacity:.85}
/* Fethiye temalı foto placeholder degradeleri (mavi aile) */
.p-villa  {background:linear-gradient(135deg,#8FC7E8,#4193C9 55%,#16558C)}
.p-otel   {background:linear-gradient(135deg,#A8D4EC,#5FA6D2 55%,#1F6398)}
.p-charter{background:linear-gradient(135deg,#6FC2E4,#2E86BE 55%,#0F4E80)}
.p-tur    {background:linear-gradient(135deg,#54B1DE,#2273AC 55%,#0C3F6B)}
.p-balik  {background:linear-gradient(135deg,#3E9CCB,#186399 55%,#0A3459)}
.badge{
  position:absolute; top:12px; left:12px; z-index:1;
  background:rgba(6,34,58,.68); color:#EAF5FE; font-size:11.5px; font-weight:600;
  letter-spacing:.05em; padding:4px 10px; border-radius:99px;
}
.card-body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:12px; flex:1}
.card-body h3{font-size:19px}
.meta{font-size:13.5px; color:var(--muted)}
.card-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; border-top:1px dashed var(--line)}
.price{font-variant-numeric:tabular-nums}
.price b{font-size:19px}
.price small{display:block; font-size:12px; color:var(--muted)}
.stockline{font-size:13px; color:var(--warn); font-weight:600}

/* ---------- doluluk çubuğu ---------- */
.occ{display:flex; flex-direction:column; gap:6px}
.occ-top{display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted)}
.occ-top b{color:var(--ink); font-variant-numeric:tabular-nums}
.bar{height:7px; border-radius:99px; background:var(--tint-2); overflow:hidden}
.bar i{display:block; height:100%; border-radius:99px; background:var(--sky); transform-origin:left; animation:fill .9s ease-out both}
.bar i.hot{background:var(--warn)}
.bar i.full{background:var(--danger)}
@keyframes fill{from{transform:scaleX(0)}}
@media (prefers-reduced-motion: reduce){ .bar i{animation:none} .card{transition:none} }

/* ---------- form alanları ---------- */
.field{display:flex; flex-direction:column; gap:6px}
.field > label{font-size:13px; font-weight:700; color:var(--ink)}
.field .help{font-size:12.5px; color:var(--muted)}
.input, select.input, textarea.input{
  border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
  font:inherit; font-size:15px; padding:11px 14px; width:100%;
}
.input:focus{border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--primary-soft)}
textarea.input{resize:vertical; min-height:100px}
.field.error .input{border-color:var(--danger)}
.field.error .help{color:var(--danger)}
.check{display:flex; gap:10px; align-items:start; font-size:14px; color:var(--muted)}
.check input{margin-top:4px; accent-color:var(--primary); width:16px; height:16px}
.check a{color:var(--primary)}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-grid{display:grid; gap:16px}

/* ---------- panel / kutu ---------- */
.panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px}
.panel.soft{background:var(--tint); border-color:var(--tint-2)}
.notice{
  display:flex; gap:10px; align-items:start; font-size:14px;
  background:var(--primary-soft); border:1px solid #C9E2F5; color:var(--ink);
  border-radius:10px; padding:12px 16px;
}
.notice.warn{background:#FBF3E6; border-color:#EEDCBB}
.notice.ok{background:#E9F6EF; border-color:#C4E5D3}

/* ---------- durum çipleri ---------- */
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; border-radius:99px; padding:3px 11px}
.chip::before{content:""; width:7px; height:7px; border-radius:99px; background:currentColor}
.chip.ok{background:#E9F6EF; color:var(--good)}
.chip.pending{background:#FBF3E6; color:var(--warn)}
.chip.cancel{background:#FBEDED; color:var(--danger)}
.chip.info{background:var(--primary-soft); color:var(--primary)}

/* ---------- tablolar ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff}
table.tbl{width:100%; border-collapse:collapse; font-size:14px; min-width:720px}
.tbl th{
  text-align:left; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  padding:12px 16px; border-bottom:1px solid var(--line); background:var(--tint);
}
.tbl td{padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:var(--tint)}

/* ---------- sekmeler ---------- */
.tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:22px; overflow-x:auto}
.tab{
  padding:10px 18px; font-size:14.5px; font-weight:600; color:var(--muted); text-decoration:none;
  border-bottom:2px solid transparent; white-space:nowrap; cursor:pointer; background:none; font-family:inherit; border-top:0; border-left:0; border-right:0;
}
.tab.on{color:var(--primary); border-bottom-color:var(--primary)}

/* ---------- takvim ---------- */
.cal{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; font-weight:700}
.cal-nav{display:flex; gap:6px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.cal-dow{font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--muted); text-align:center; padding:6px 0; text-transform:uppercase}
.cal-day{
  border:1px solid var(--line); border-radius:8px; padding:6px 4px 5px; text-align:center; min-height:52px;
  font-size:13.5px; font-weight:600; cursor:pointer; background:#fff;
}
.cal-day small{display:block; font-size:10.5px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums}
.cal-day:hover{border-color:var(--primary)}
.cal-day.busy{background:var(--tint); color:#A9BCCC; cursor:not-allowed; text-decoration:line-through}
.cal-day.busy small{visibility:hidden}
.cal-day.sel{background:var(--primary); border-color:var(--primary); color:#fff}
.cal-day.sel small{color:#CBE4F7}
.cal-day.range{background:var(--primary-soft); border-color:#C9E2F5}
.cal-day.out{opacity:.35; cursor:default}
.cal-legend{display:flex; gap:18px; margin-top:12px; font-size:12.5px; color:var(--muted)}
.cal-legend i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px}

/* ---------- galeri ---------- */
.gallery{display:grid; grid-template-columns:2.2fr 1fr 1fr; grid-template-rows:180px 180px; gap:10px; border-radius:var(--radius); overflow:hidden}
.gallery .ph{position:relative; display:flex; align-items:end; padding:10px; color:#EAF5FE; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase}
.gallery .ph:first-child{grid-row:1 / 3}
.gallery .ph::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(6,34,58,.45))}
.gallery .ph span{position:relative; z-index:1; opacity:.8}

/* ---------- adımlar (checkout) ---------- */
.flow{display:flex; align-items:center; gap:0; margin:22px 0 30px; font-size:13.5px}
.flow .st{display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:600}
.flow .st .dot{width:26px; height:26px; border-radius:99px; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; background:#fff}
.flow .st.done .dot{background:var(--good); border-color:var(--good); color:#fff}
.flow .st.on{color:var(--ink)}
.flow .st.on .dot{border-color:var(--primary); color:var(--primary)}
.flow .ln{flex:1; height:2px; background:var(--line); margin:0 12px; min-width:24px}

/* ---------- footer + whatsapp ---------- */
.site-footer{border-top:1px solid var(--line); background:var(--tint); padding:34px 0 46px; font-size:13.5px; color:var(--muted); margin-top:72px}
.foot{display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; justify-content:space-between}
.foot nav{display:flex; flex-wrap:wrap; gap:18px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--primary)}
.design-note{margin-top:18px; padding:12px 16px; border:1px dashed #C3D8E8; border-radius:10px; font-size:12.5px}
.wa{
  position:fixed; right:22px; bottom:22px; z-index:30;
  display:flex; align-items:center; gap:10px;
  background:var(--wa); color:#fff; text-decoration:none;
  border-radius:99px; padding:12px 18px 12px 14px; font-weight:700; font-size:14.5px;
  box-shadow:0 8px 24px rgba(10,60,35,.3); transition:transform .15s;
}
.wa:hover{transform:scale(1.04)}

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin{background:var(--tint)}
.admin-shell{display:grid; grid-template-columns:240px 1fr; min-height:100vh}
.side{
  background:#0B2A47; color:#C9DCEE; padding:22px 16px; display:flex; flex-direction:column; gap:26px;
  position:sticky; top:0; height:100vh;
}
.side-brand{font-weight:700; font-size:17px; color:#fff; padding:0 10px; display:flex; align-items:center; gap:9px}
.side-brand small{display:block; font-weight:600; font-size:10.5px; letter-spacing:.14em; color:#7FA8CC; text-transform:uppercase}
.side nav{display:flex; flex-direction:column; gap:3px}
.side nav a{
  text-decoration:none; font-size:14.5px; font-weight:600; padding:10px 12px; border-radius:9px; color:#C9DCEE;
}
.side nav a:hover{background:rgba(255,255,255,.07); color:#fff}
.side nav a.on{background:var(--primary); color:#fff}
.side-foot{margin-top:auto; font-size:12.5px; color:#7FA8CC; padding:0 10px; display:flex; flex-direction:column; gap:6px}
.side-foot a{color:#C9DCEE; text-decoration:none}
.admin-main{padding:28px 32px 60px; min-width:0}
.admin-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap}
.admin-head h1{font-family:inherit; font-weight:700; font-size:24px; letter-spacing:-.01em}
.admin-head .sub{font-size:13.5px; color:var(--muted); margin-top:2px}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:26px}
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px}
.stat .lbl{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.stat .val{font-size:27px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:6px; letter-spacing:-.01em}
.stat .trend{font-size:12.5px; font-weight:600; margin-top:4px}
.stat .trend.up{color:var(--good)}
.stat .trend.down{color:var(--danger)}

.toolbar{display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap}
.toolbar .input{width:auto; min-width:200px; padding:9px 13px; font-size:14px}
.toolbar .spacer{flex:1}

/* toggle switch */
.switch{position:relative; width:40px; height:22px; display:inline-block; flex:none}
.switch input{opacity:0; width:0; height:0}
.switch i{position:absolute; inset:0; background:#C7D8E6; border-radius:99px; transition:background .15s; cursor:pointer}
.switch i::after{content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:99px; background:#fff; transition:left .15s}
.switch input:checked + i{background:var(--good)}
.switch input:checked + i::after{left:21px}

/* foto yükleme ızgarası (admin ürün formu) */
.upload-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px}
.upload-ph{height:86px; border-radius:10px; position:relative; overflow:hidden}
.upload-add{
  height:86px; border:2px dashed var(--line); border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; background:#fff;
}
.upload-add:hover{border-color:var(--primary); color:var(--primary)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-links{display:none}
  .form-row{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr; grid-template-rows:160px 120px 120px}
  .gallery .ph:first-child{grid-row:1; grid-column:1 / 3}
  .admin-shell{grid-template-columns:1fr}
  .side{position:static; height:auto; flex-direction:row; align-items:center; flex-wrap:wrap; gap:12px}
  .side nav{flex-direction:row; flex-wrap:wrap}
  .side-foot{display:none}
  .admin-main{padding:20px 16px 48px}
}