:root {
  --kagit: #FBF6EF;
  --kagit2: #F4ECE1;
  --kart: #FFFFFF;
  --murekkep: #2A1B2E;
  --murekkep2: #5E4B62;
  --soluk: #9A8A9C;
  --cizgi: #EADFD3;
  --gul: #E0745A;
  --gul-acik: #FBE3DA;
  --altin: #E9B949;
  --altin-acik: #FBF0CF;
  --ada: #6F9478;
  --ada-acik: #E1EEE3;
  --erik: #6B3F74;
  --erik-acik: #EFE2F2;
  --hata: #C2413A;
  --golge: 0 1px 2px rgba(42, 27, 46, .06), 0 8px 24px rgba(42, 27, 46, .07);
  --r: 18px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--kagit);
  background-image: radial-gradient(circle at 12% -10%, #F9DCCF 0, transparent 38%), radial-gradient(circle at 105% 8%, #F3E7C4 0, transparent 30%);
  background-attachment: fixed;
  color: var(--murekkep);
  font: 15px/1.5 Manrope, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
h1, h2, h3 { font-family: Fraunces, Georgia, serif; font-weight: 700; letter-spacing: -.01em; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
.gizli { display: none !important; }

/* ---------- üst şerit */
.ust {
  display: flex; align-items: center; gap: 14px; padding: 18px 28px; max-width: 1240px; margin: 0 auto;
}
.marka { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marka-isaret { width: 34px; height: 34px; }
.marka b { font-family: Fraunces, serif; font-size: 21px; }
.marka small { display: block; font-size: 11px; color: var(--soluk); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-top: -3px; }
.ust .bosluk { flex: 1; }
.rozet { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 700; background: var(--kart); border: 1px solid var(--cizgi); }
.rozet i { width: 8px; height: 8px; border-radius: 50%; background: var(--soluk); }
.rozet.acik i { background: var(--ada); box-shadow: 0 0 0 3px var(--ada-acik); }
.rozet.kapali i { background: var(--altin); box-shadow: 0 0 0 3px var(--altin-acik); }

.sayfa { max-width: 1240px; margin: 0 auto; padding: 8px 28px 80px; }

/* ---------- düğmeler */
.dgm {
  border: 0; cursor: pointer; border-radius: 12px; padding: 10px 16px; font-weight: 700; font-size: 14px;
  background: var(--murekkep); color: #fff; display: inline-flex; align-items: center; gap: 8px; transition: transform .12s, box-shadow .12s, background .12s;
}
.dgm:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(42, 27, 46, .18); }
.dgm:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.dgm.gul { background: var(--gul); }
.dgm.ada { background: var(--ada); }
.dgm.hafif { background: var(--kart); color: var(--murekkep); border: 1px solid var(--cizgi); }
.dgm.hafif:hover { background: var(--kagit2); }
.dgm.kucuk { padding: 6px 10px; font-size: 13px; border-radius: 10px; }
.dgm.buyuk { padding: 14px 22px; font-size: 16px; border-radius: 14px; }
.ikon-dgm { border: 0; background: transparent; cursor: pointer; padding: 6px; border-radius: 8px; color: var(--murekkep2); line-height: 0; }
.ikon-dgm:hover { background: var(--kagit2); color: var(--murekkep); }

/* ---------- giriş */
.giris { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.giris-kart { width: min(400px, 100%); background: var(--kart); border-radius: 26px; padding: 34px; box-shadow: var(--golge); text-align: center; }
.giris-kart svg { width: 64px; height: 64px; margin-bottom: 10px; }
.giris-kart h1 { font-size: 28px; }
.giris-kart p { color: var(--murekkep2); margin: 6px 0 22px; }
.giris-kart form { display: grid; gap: 10px; }

.girdi { width: 100%; border: 1.5px solid var(--cizgi); border-radius: 12px; padding: 11px 13px; background: #fff; outline: none; transition: border-color .12s, box-shadow .12s; }
.girdi:focus { border-color: var(--gul); box-shadow: 0 0 0 4px var(--gul-acik); }
textarea.girdi { resize: vertical; min-height: 84px; font-size: 13px; line-height: 1.45; }

/* ---------- projeler */
.karsilama { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 10px 0 34px; }
.yeni {
  position: relative; overflow: hidden; border-radius: 24px; padding: 26px 26px 24px; cursor: pointer; border: 0; text-align: left;
  color: #fff; min-height: 186px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .15s, box-shadow .15s;
}
.yeni:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(42, 27, 46, .22); }
.yeni.kurgu { background: linear-gradient(135deg, #3B2141 0%, #6B3F74 55%, #B5577A 100%); }
.yeni.foto { background: linear-gradient(135deg, #C8553D 0%, #E0745A 45%, #E9B949 100%); }
.yeni h2 { font-size: 26px; }
.yeni p { margin: 6px 0 0; opacity: .88; max-width: 380px; font-size: 14px; }
.yeni .arti { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 24px; }
.yeni svg.susleme { position: absolute; right: -18px; bottom: -28px; width: 210px; height: 210px; opacity: .22; }

.baslik-satir { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.baslik-satir h2 { font-size: 22px; }
.baslik-satir span { color: var(--soluk); font-weight: 600; }

.izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.pkart { background: var(--kart); border-radius: var(--r); overflow: hidden; box-shadow: var(--golge); text-decoration: none; display: flex; flex-direction: column; transition: transform .15s; }
.pkart:hover { transform: translateY(-2px); }
.pkart .kapak { aspect-ratio: 16/10; background: var(--kagit2) center/cover; position: relative; }
.pkart .kapak .tur { position: absolute; left: 10px; top: 10px; }
.pkart .govde { padding: 12px 14px 14px; display: grid; gap: 6px; }
.pkart b { font-size: 15.5px; }
.pkart small { color: var(--soluk); font-size: 12.5px; }
.etiket { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
.etiket.kurgu { background: var(--erik-acik); color: var(--erik); }
.etiket.foto { background: var(--gul-acik); color: #B04A33; }
.etiket.bitti { background: var(--ada-acik); color: #3F6B4A; }
.etiket.calisiyor { background: var(--altin-acik); color: #8A6510; }
.etiket.hata { background: #FADBD8; color: var(--hata); }
.etiket.bekliyor { background: var(--kagit2); color: var(--murekkep2); }
.bos-durum { text-align: center; padding: 50px 20px; color: var(--soluk); border: 2px dashed var(--cizgi); border-radius: 22px; }

/* ---------- proje sayfası */
.geri { color: var(--murekkep2); text-decoration: none; font-weight: 700; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }
.proje-ust { display: flex; align-items: center; gap: 14px; margin: 10px 0 22px; flex-wrap: wrap; }
.proje-ust h1 { font-size: 32px; outline: none; border-radius: 8px; padding: 0 4px; margin-left: -4px; }
.proje-ust h1:focus { background: #fff; box-shadow: 0 0 0 3px var(--gul-acik); }
.proje-ust .bosluk { flex: 1; }

.yerlesim { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.panel { background: var(--kart); border-radius: 22px; box-shadow: var(--golge); padding: 22px; margin-bottom: 18px; }
.panel-baslik { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.panel-baslik .no { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; }
.panel-baslik h3 { font-size: 18px; flex: 1; }
.panel-baslik small { color: var(--soluk); font-weight: 600; }
.no.r1 { background: var(--erik); } .no.r2 { background: var(--gul); } .no.r3 { background: var(--altin); } .no.r4 { background: var(--ada); }

.birak {
  border: 2px dashed #E3C9BC; border-radius: 16px; padding: 22px; text-align: center; color: var(--murekkep2); background: #FFFAF6; cursor: pointer; transition: background .12s, border-color .12s;
}
.birak:hover, .birak.uzerinde { background: var(--gul-acik); border-color: var(--gul); }
.birak b { color: var(--murekkep); }
.birak small { display: block; color: var(--soluk); margin-top: 3px; }

.yukleme-liste { display: grid; gap: 8px; margin-top: 12px; }
.yukleme { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 13px; }
.cubuk { grid-column: 1 / -1; height: 6px; background: var(--kagit2); border-radius: 99px; overflow: hidden; }
.cubuk i { display: block; height: 100%; background: linear-gradient(90deg, var(--gul), var(--altin)); border-radius: 99px; transition: width .3s; }

.dosya-liste { display: grid; gap: 8px; margin-top: 14px; }
.dosya-satir { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--kagit); }
.dosya-satir img { width: 64px; height: 40px; object-fit: cover; border-radius: 8px; background: var(--kagit2); }
.dosya-satir .ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13.5px; }
.dosya-satir small { color: var(--soluk); font-size: 12px; white-space: nowrap; }

.foto-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.foto-kart { background: var(--kagit); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; border: 2px solid transparent; transition: opacity .15s, border-color .15s; }
.foto-kart.pasif { opacity: .45; }
.foto-kart .resim { position: relative; background: var(--kagit2); }
.foto-kart img, .foto-kart video { width: 100%; display: block; aspect-ratio: 4/5; object-fit: cover; }
.foto-kart.b169 img, .foto-kart.b169 video { aspect-ratio: 16/9; }
.foto-kart.b11 img, .foto-kart.b11 video { aspect-ratio: 1; }
.foto-kart.b916 img, .foto-kart.b916 video { aspect-ratio: 9/16; max-height: 300px; }
.foto-kart .araclar { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.foto-kart .araclar button { background: rgba(255,255,255,.92); border: 0; border-radius: 8px; width: 28px; height: 28px; cursor: pointer; display: grid; place-items: center; font-weight: 800; color: var(--murekkep); }
.foto-kart .sira { position: absolute; left: 6px; top: 6px; background: var(--murekkep); color: #fff; font-weight: 800; font-size: 12px; border-radius: 8px; padding: 3px 8px; }
.foto-kart .alt { padding: 8px; display: grid; gap: 6px; }
.foto-kart .sahne { font-size: 12px; color: var(--murekkep2); font-weight: 600; }
.foto-kart .klip-var { position: absolute; left: 6px; bottom: 6px; }

.secenekler { display: grid; gap: 16px; }
.secenek > label, .secenek > .etiketce { display: block; font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--murekkep2); margin-bottom: 7px; }
.parcali { display: flex; flex-wrap: wrap; gap: 6px; }
.parcali button {
  border: 1.5px solid var(--cizgi); background: #fff; border-radius: 11px; padding: 7px 12px; cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--murekkep2);
}
.parcali button.secili { border-color: var(--murekkep); background: var(--murekkep); color: #fff; }
.model-liste { display: grid; gap: 7px; }
.model { border: 1.5px solid var(--cizgi); border-radius: 13px; padding: 9px 12px; cursor: pointer; background: #fff; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; }
.model b { font-size: 14px; }
.model span { font-size: 12.5px; font-weight: 800; color: var(--gul); }
.model small { grid-column: 1 / -1; color: var(--soluk); font-size: 12px; }
.model.secili { border-color: var(--gul); box-shadow: 0 0 0 3px var(--gul-acik); }
.model:disabled { opacity: .45; cursor: not-allowed; }
.renk-liste { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.renk { border: 2px solid transparent; border-radius: 12px; padding: 0; cursor: pointer; background: none; text-align: center; font-size: 11px; font-weight: 700; color: var(--murekkep2); }
.renk i { display: block; height: 38px; border-radius: 10px; margin-bottom: 4px; }
.renk.secili { border-color: var(--murekkep); }
.renk.secili i { box-shadow: inset 0 0 0 2px #fff; }
.anahtar { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 14px; }
.anahtar input { width: 18px; height: 18px; accent-color: var(--gul); }

/* ---------- durum ve sonuç */
.yapiskan { position: sticky; top: 18px; }
.durum-kart { background: var(--murekkep); color: #fff; border-radius: 22px; padding: 20px; margin-bottom: 18px; box-shadow: var(--golge); }
.durum-kart h3 { font-size: 17px; margin-bottom: 4px; }
.durum-kart p { margin: 0 0 14px; color: #D9CCDB; font-size: 13.5px; min-height: 20px; white-space: pre-line; }
.durum-kart .cubuk { background: rgba(255,255,255,.14); height: 8px; margin-bottom: 14px; }
.durum-kart .dgm { width: 100%; justify-content: center; }
.durum-kart .dgm + .dgm { margin-top: 8px; }
.durum-kart .not { font-size: 12px; color: #BFAEC2; margin-top: 10px; }
.durum-kart.hata { background: #4A1E22; }
.durum-kart .maliyet { display: flex; justify-content: space-between; font-size: 13px; color: #D9CCDB; border-top: 1px solid rgba(255,255,255,.12); padding-top: 10px; margin-top: 12px; }
.durum-kart .maliyet b { color: #fff; }

.sonuc { background: var(--kart); border-radius: 22px; box-shadow: var(--golge); padding: 16px; margin-bottom: 18px; }
.sonuc video { width: 100%; border-radius: 14px; background: #000; display: block; max-height: 520px; }
.sonuc .satir { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.sonuc .satir small { flex: 1; color: var(--soluk); font-weight: 600; }

.zaman-cizelgesi { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-top: 4px; }
.zc-parca { flex: 0 0 132px; background: var(--kagit); border-radius: 12px; overflow: hidden; font-size: 12px; }
.zc-parca img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.zc-parca div { padding: 6px 8px; display: grid; gap: 2px; }
.zc-parca b { font-size: 12px; }
.zc-parca small { color: var(--soluk); }
.puan { display: inline-block; min-width: 26px; text-align: center; border-radius: 6px; padding: 0 5px; font-weight: 800; color: #fff; background: var(--ada); }

audio { width: 100%; margin-top: 10px; height: 36px; }

#bildirim { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--murekkep); color: #fff; padding: 11px 18px; border-radius: 14px; font-weight: 700; opacity: 0; pointer-events: none; transition: all .2s; z-index: 50; max-width: calc(100% - 32px); }
#bildirim.goster { opacity: 1; transform: translateX(-50%); }
#bildirim.hata { background: var(--hata); }

@media (max-width: 920px) {
  .yerlesim { grid-template-columns: 1fr; }
  .yapiskan { position: static; }
  .karsilama { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ust, .sayfa { padding-left: 16px; padding-right: 16px; }
  .proje-ust h1 { font-size: 26px; }
  .renk-liste { grid-template-columns: repeat(3, 1fr); }
  .foto-izgara { grid-template-columns: repeat(2, 1fr); }
}
a.dgm { text-decoration: none; }
.marka span { white-space: nowrap; }
.rozet { white-space: nowrap; }
@media (max-width: 560px) {
  .ust { gap: 8px; }
  .marka small, .rozet.harcama { display: none; }
  .rozet .uzun { display: none; }
  .yeni { min-height: 160px; }
  .yeni h2 { font-size: 23px; }
}
.rozet .kisa { display: none; }
@media (max-width: 560px) {
  .rozet .kisa { display: inline; }
  .foto-kart .araclar { gap: 3px; top: 5px; right: 5px; }
  .foto-kart .araclar button { width: 24px; height: 24px; border-radius: 7px; }
  .foto-kart .sira { left: 5px; top: 5px; padding: 2px 6px; }
}

/* müzik haritası */
.muzik-bilgi { margin-top: 12px; display: grid; gap: 6px; }
.muzik-bilgi .tanima { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.muzik-bilgi .tanima b { font-size: 14px; }
.muzik-bilgi .tanima small { color: var(--soluk); }
.harita { position: relative; height: 46px; border-radius: 12px; background: var(--kagit2); overflow: hidden; }
.harita .bolum { position: absolute; top: 0; bottom: 0; border-right: 2px solid #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--murekkep); overflow: hidden; white-space: nowrap; }
.harita .bolum.nakarat { color: #6B4C05; }
.harita .kullanilan { position: absolute; top: 3px; bottom: 3px; border: 2.5px solid var(--murekkep); border-radius: 8px; box-shadow: 0 0 0 2px rgba(255,255,255,.7); pointer-events: none; }
.harita .ikonik { position: absolute; top: -1px; transform: translateX(-50%); color: var(--gul); font-size: 15px; text-shadow: 0 0 3px #fff; }
.harita-alt { display: flex; justify-content: space-between; }
.harita-alt small, .aciklama { color: var(--soluk); font-size: 12.5px; font-weight: 600; }