/* Merkez: bir konser salonu. Karanlık sahne ve oturma planı ana ekran, plan fildişi partisyon kâğıdı.
   Cesaret yalnız oturma planında; geri kalan sade. */
:root {
  --sahne: #1b1226; --perde: #281a38; --perde2: #352449; --cizgi: #4b3763;
  --pirinc: #c8a257; --fildisi: #f1eadb; --soluk: #b7a9c6; --gul: #e08a9c; --yesil: #86c7a4; --kehribar: #e0ac64;
  --murekkep: #2a1d38; --kagit-cizgi: #d6ccb7; --kagit-soluk: #6f6377;
  --bas: "Gloock", Georgia, serif; --gov: "Schibsted Grotesk", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--sahne); color: var(--fildisi); font: 400 16px/1.5 var(--gov); -webkit-font-smoothing: antialiased; }
h1, h2 { font-family: var(--bas); font-weight: 400; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.1; }
h2 { font-size: 24px; line-height: 1.2; }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: var(--pirinc); color: #21162e; border: 0; border-radius: 6px; padding: 9px 15px; font-weight: 600; cursor: pointer; }
button.ikincil { background: transparent; color: inherit; border: 1px solid currentColor; font-weight: 500; }
button:disabled { opacity: .55; cursor: default; }
:focus-visible { outline: 2px solid var(--pirinc); outline-offset: 2px; }
input, select, textarea { background: var(--perde); border: 1px solid var(--cizgi); border-radius: 6px; padding: 9px 11px; min-width: 0; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--pirinc); padding: 0; }
.soluk { color: var(--soluk); }
.hata { color: var(--gul); min-height: 1.5em; }

/* giriş */
.giris { min-height: 100%; display: grid; place-items: center; padding: 24px max(16px, env(safe-area-inset-left)); }
.giris-kutu { width: min(380px, 100%); display: grid; gap: 14px; }
.giris-kutu h1 { font-size: 56px; }
.giris-kutu label { display: grid; gap: 5px; color: var(--soluk); }
.yan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }

/* iskelet */
.uygulama { display: grid; grid-template-columns: 172px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; height: 100dvh; }
.ray { grid-row: 1 / 3; display: flex; flex-direction: column; gap: 2px; padding: 22px 12px; background: var(--perde); }
.marka { font: 400 27px var(--bas); padding: 0 10px 18px; color: var(--pirinc); }
.sekme { background: none; color: var(--soluk); text-align: left; font-weight: 500; padding: 10px; }
.sekme.secili { background: var(--perde2); color: var(--fildisi); }
.mac-durum { margin-top: auto; padding: 10px; font-size: 14px; color: var(--soluk); line-height: 1.35; }
.icerik { overflow-y: auto; min-width: 0; }
.gorunum { padding: 28px clamp(16px, 3vw, 38px) 34px; display: grid; gap: 20px; max-width: 1240px; margin: 0 auto; }
.gorunum > * { min-width: 0; }
.baslik { display: grid; gap: 4px; }
.baslik p { color: var(--soluk); max-width: 64ch; }
.baslik-yan { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 20px; }
.baslik-yan > div { display: grid; gap: 4px; }
.tum-ekip { display: grid; gap: 30px; padding-top: 6px; }
.tum-bolum { display: grid; gap: 14px; }
.tum-ekip .uye { color: var(--fildisi); }
.tum-ekip .uye img { border-color: var(--cizgi); }
.tum-ekip .hat-izgara { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tum-ekip .hat span { color: var(--soluk); }
.tum-ekip .hat .durum.iyi { color: var(--yesil); } .tum-ekip .hat .durum.bekle { color: var(--kehribar); } .tum-ekip .hat .durum.kotu { color: var(--gul); }

/* oturma planı */
.sahne { position: relative; aspect-ratio: 1000 / 600; margin-top: -10px; width: min(100%, 1080px, calc((100dvh - 262px) * 1.667)); min-width: 760px; margin: 0 auto; }
#sahne-cizim { position: absolute; inset: 0; width: 100%; height: 100%; }
#sahne-cizim .yay { fill: none; stroke: var(--cizgi); stroke-width: 1; }
#sahne-cizim .bolme { stroke: var(--cizgi); stroke-width: 1; stroke-dasharray: 3 6; }
#sahne-cizim text { fill: var(--pirinc); font: 400 19px var(--bas); text-anchor: middle; }
.koltuk { position: absolute; transform: translate(-50%, -50%); background: none; color: inherit; padding: 0; display: grid; justify-items: center; gap: 3px; width: 92px; font-weight: 500; z-index: 1; }
.koltuk img, .sen { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid var(--cizgi); background: var(--perde2); transition: transform .16s, border-color .16s; }
.koltuk.sef { width: 190px; gap: 6px; }
.koltuk.sef img { width: clamp(110px, 13vw, 158px); height: clamp(110px, 13vw, 158px); border-color: var(--pirinc); border-width: 3px; }
.koltuk:hover img, .koltuk:focus-visible img { transform: scale(1.09); border-color: var(--pirinc); }
.koltuk span { font-size: 12px; line-height: 1.15; text-align: center; color: var(--soluk); }
.koltuk.sef span { font: 400 23px/1.15 var(--bas); color: var(--fildisi); }
.koltuk small { font-size: 13.5px; color: var(--soluk); font-weight: 400; }
.koltuk.kapali img { filter: grayscale(.85); opacity: .7; }
.isik { position: absolute; width: 11px; height: 11px; border-radius: 50%; right: calc(50% - 26px); top: 40px; border: 2px solid var(--sahne); background: var(--soluk); }
.koltuk.sef .isik { right: calc(50% - clamp(46px, 5.4vw, 66px)); top: clamp(8px, 1vw, 12px); width: 16px; height: 16px; }
.isik.iyi { background: var(--yesil); } .isik.kotu { background: var(--gul); } .isik.bekle { background: var(--kehribar); }
.podyum { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; z-index: 1; }
.sen { width: 70px; height: 70px; display: grid; place-items: center; font: 400 30px var(--bas); color: #21162e; background: var(--pirinc); border-color: var(--fildisi); }
.podyum span { font: 400 17px var(--bas); }

.ipucu { position: fixed; z-index: 20; width: 300px; max-width: calc(100vw - 24px); background: var(--fildisi); color: var(--murekkep); border-radius: 8px; padding: 12px 14px; pointer-events: none; font-size: 14.5px; display: grid; gap: 6px; box-shadow: 0 10px 34px #0007; }
.ipucu b { font: 400 18px var(--bas); }
.ipucu code { font: 500 12.5px ui-monospace, Menlo, monospace; background: #e5dcc8; padding: 2px 5px; border-radius: 3px; overflow-wrap: anywhere; }
.ipucu small { color: var(--kagit-soluk); }

/* telefon ekip listesi */
.ekip-liste { display: none; gap: 26px; }
.ekip { display: grid; gap: 10px; }
.ekip-sef, .kisi { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; background: none; color: inherit; text-align: left; padding: 6px 0; font-weight: 400; position: relative; }
.ekip-sef { grid-template-columns: 76px minmax(0, 1fr); }
.ekip-sef img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 2px solid var(--pirinc); }
.kisi img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cizgi); }
.ekip-sef b { font: 400 21px var(--bas); display: block; }
.kisi b { font-weight: 600; display: block; }
.ekip-sef span, .kisi span { color: var(--soluk); font-size: 14px; line-height: 1.35; display: block; }

/* hatlar */
.ekip-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px 8px; margin-top: 6px; }
.uye { background: none; color: var(--murekkep); padding: 0; display: grid; justify-items: center; gap: 4px; font-weight: 500; font-size: 12.5px; line-height: 1.2; text-align: center; }
.uye img { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; border: 2px solid var(--kagit-cizgi); }
.uye:hover img { border-color: var(--murekkep); }
.hat-izgara { display: grid; gap: 10px; margin-top: 6px; }
.hat { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 11px; align-items: center; }
.hat img { width: 62px; height: 62px; object-fit: cover; border-radius: 8px; display: block; }
.hat b { font: 400 18px var(--bas); display: block; }
.hat span { font-size: 14px; color: var(--kagit-soluk); line-height: 1.35; display: block; }
.durum { font-size: 13.5px; font-weight: 600; color: var(--soluk); }
.durum.iyi { color: var(--yesil); } .durum.kotu { color: var(--gul); } .durum.bekle { color: var(--kehribar); }

/* çekmece */
.cekmece { position: fixed; z-index: 30; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--fildisi); color: var(--murekkep); overflow-y: auto; padding: 0 0 max(28px, env(safe-area-inset-bottom)); box-shadow: -18px 0 50px #0008; }
.cekmece-foto { position: relative; }
.cekmece-foto img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: center 22%; display: block; }
.cekmece-geri { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; background: var(--fildisi) !important; color: var(--murekkep); }
.cekmece-kapat { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; background: var(--fildisi); color: var(--murekkep); }
.cekmece-ic { padding: 18px max(20px, env(safe-area-inset-right)) 0 20px; display: grid; gap: 15px; }
.cekmece h2 { font-size: 32px; }
.cekmece h3 { margin: 0 0 3px; font: 600 15px var(--gov); }
.cekmece ul { margin: 0; padding-left: 19px; }
.cekmece .alt { color: var(--kagit-soluk); font-size: 15px; }
.cekmece pre { margin: 0; font: 12.5px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; background: #e5dcc8; border-radius: 6px; padding: 10px 12px; }
.cekmece details pre { max-height: 46vh; overflow-y: auto; margin-top: 8px; }
.cekmece summary { cursor: pointer; font-weight: 600; }
.cekmece button { justify-self: start; }
.cekmece .durum.iyi { color: var(--ok, #1c7a4f); } .cekmece .durum.kotu { color: #b02a44; } .cekmece .durum.bekle { color: #a4620e; }

/* dok */
.dok { grid-column: 2; background: var(--perde); border-top: 1px solid var(--cizgi); padding: 9px clamp(16px, 3vw, 38px) max(9px, env(safe-area-inset-bottom)); display: grid; gap: 7px; }
.cipler { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.cip { display: flex; align-items: center; gap: 6px; background: var(--perde2); color: var(--soluk); padding: 3px 11px 3px 3px; border-radius: 99px; font-weight: 500; font-size: 14px; flex: none; }
.cip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.cip.secili { background: var(--pirinc); color: #21162e; }
.dok-sira { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.dok-sira textarea { resize: none; max-height: 130px; background: var(--sahne); }
.dok-ayar { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 14px; color: var(--soluk); }
.dok-ayar label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dok-ayar select { padding: 3px 6px; max-width: 200px; }
.dok-not { color: var(--kehribar); }
.onay { display: flex; align-items: center; gap: 7px; }

/* plan */
.kagit { background: var(--fildisi); color: var(--murekkep); max-width: none; min-height: 100%; }
.kagit .baslik p, .kagit .soluk { color: var(--kagit-soluk); }
.kagit input, .kagit select { background: #fbf7ee; border-color: var(--kagit-cizgi); }
.kagit button { background: var(--murekkep); color: var(--fildisi); }
.kagit button.ikincil { background: transparent; color: var(--murekkep); }
.plan-duzen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; max-width: 1180px; }
.plan-sol, .plan-sag { display: grid; gap: 18px; align-content: start; min-width: 0; }
.gun-liste, .aylik-liste { list-style: none; margin: 0; padding: 0; }
.gun-liste li, .aylik-liste li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--kagit-cizgi); }
.gun-liste li.bitti .is-ad { text-decoration: line-through; color: var(--kagit-soluk); }
.is-ad small { display: block; color: var(--kagit-soluk); font-size: 13.5px; }
.gun-liste .kucuk, .aylik-liste .kucuk { padding: 3px 8px; font-size: 13px; font-weight: 500; }
.bos { color: var(--kagit-soluk); padding: 8px 0; }
.gorev-form { display: grid; gap: 10px; }
.gorev-form input#g-baslik { width: 100%; }
.sira { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sira label { display: grid; gap: 3px; font-size: 14px; color: var(--kagit-soluk); min-width: 0; }
.sira input, .sira select { width: 100%; }
.gorev-form > button { justify-self: start; }
.ay-bas { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: center; }
.takvim { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.takvim b { font-size: 13px; font-weight: 500; color: var(--kagit-soluk); text-align: center; }
.gun { aspect-ratio: 1; background: #e9e1cf !important; color: var(--murekkep) !important; border-radius: 5px; padding: 4px; display: grid; align-content: space-between; justify-items: start; font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; }
.gun.bos-gun { visibility: hidden; }
.gun.bugun { outline: 2px solid var(--murekkep); }
.gun.secili { background: var(--murekkep) !important; color: var(--fildisi) !important; }
.gun i { font-style: normal; font-size: 11px; font-weight: 600; color: #8a5a10; }
.gun.secili i { color: var(--pirinc); }

/* işler */
.is-liste { display: grid; gap: 2px; }
.is-sat { background: var(--perde); border-radius: 6px; }
.is-sat summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; padding: 11px 14px; cursor: pointer; list-style: none; }
.is-sat summary::-webkit-details-marker { display: none; }
.is-sat b { font-weight: 600; }
.is-sat .ozet { grid-column: 1 / -1; color: var(--soluk); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-sonuc { padding: 0 14px 14px; display: grid; gap: 10px; }
.is-sonuc pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 14.5px/1.55 var(--gov); max-height: 56vh; overflow-y: auto; }
.bos-kart { color: var(--soluk); padding: 22px 0; }

/* projeler + paneller */
.proje-form { display: grid; grid-template-columns: minmax(0, 340px) auto; gap: 8px; justify-content: start; }
.proje-liste, .panel-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.proje, .panel { background: var(--perde); border-radius: 8px; padding: 14px 16px; display: grid; gap: 6px; align-content: start; text-decoration: none; min-width: 0; }
.proje b, .panel b { font: 400 20px var(--bas); overflow-wrap: anywhere; }
.proje span, .panel span { color: var(--soluk); font-size: 14px; overflow-wrap: anywhere; }
.proje button { justify-self: start; margin-top: 4px; padding: 5px 11px; }
a.panel:hover { background: var(--perde2); }
.panel-grup { grid-column: 1 / -1; font: 400 19px var(--bas); color: var(--pirinc); padding-top: 8px; }
.panel input { width: 100%; }
.sira-dugme { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 900px) {
  .uygulama { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .ray { grid-row: auto; flex-direction: row; overflow-x: auto; padding: max(8px, env(safe-area-inset-top)) 12px 6px; align-items: center; gap: 2px; scrollbar-width: none; }
  .marka { display: none; }
  .sekme { flex: none; padding: 7px 11px; }
  .mac-durum { display: none; }
  .dok { grid-column: 1; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .gorunum { padding: 18px max(16px, env(safe-area-inset-left)) 24px max(16px, env(safe-area-inset-right)); }
  .sahne { display: none; }
  .ekip-liste { display: grid; }
  .baslik-yan { grid-template-columns: minmax(0, 1fr); }
  .baslik-yan button { justify-self: start; }
  .plan-duzen { grid-template-columns: minmax(0, 1fr); }
  .proje-form { grid-template-columns: minmax(0, 1fr) auto; }
  .dok-sira textarea { font-size: 16px; }
  input, select { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }