/* =================================================================
   app-ui.css — Uygulama arayüzünün birebir HTML/CSS yeniden kodu
   (Swift/SwiftUI tasarımından: widget'lar + telefon ekranları)
   Ekran görüntüsü KULLANILMAZ; her şey saf CSS.
   ================================================================= */

:root {
  --w-accent: #DA914E;
  --w-accent-soft: rgba(218,145,78,0.18);
  --w-card: #ffffff;
  --w-ink: #1c1814;
  --w-sec: #8a8079;
  --w-line: rgba(0,0,0,.08);
}

/* ---------- iOS ana ekran sahnesi ---------- */
.home-scene {
  position: relative; border-radius: 38px; overflow: hidden;
  padding: 2.2rem 1.6rem; aspect-ratio: 10/11; max-width: 460px; margin-inline: auto;
  background:
    radial-gradient(120% 80% at 20% 0%, #f6cd9c 0%, transparent 55%),
    radial-gradient(120% 90% at 90% 100%, #e7a86a 0%, transparent 55%),
    linear-gradient(165deg, #fbe3c6, #f3b97e);
  box-shadow: 0 30px 70px rgba(120,80,40,.22), inset 0 0 0 1px rgba(255,255,255,.3);
}
.home-scene .scene-time { text-align: center; color: #5a3c1e; font-weight: 600; margin-bottom: 1.4rem; }
.home-scene .scene-time .clock { font-size: 2.4rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.home-scene .scene-time .date { font-size: .85rem; opacity: .8; margin-top: .2rem; }
.widgets-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

/* ---------- Genel widget kabı (iOS) ---------- */
.ios-widget {
  background: var(--w-card); border-radius: 22px; padding: 14px;
  box-shadow: 0 8px 22px rgba(80,50,20,.14);
  color: var(--w-ink); font-size: 13px; line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
.ios-widget.span-2 { grid-column: span 2; }
.ios-widget.square { aspect-ratio: 1; display: flex; flex-direction: column; }

/* ---------- Tesbih (Zikir) widget — 33 taneli halka ---------- */
.tesbih-widget { display: flex; align-items: center; gap: 12px; }
.tesbih-ring { position: relative; flex: 0 0 auto; width: 116px; height: 116px; }
.tesbih-ring .ring-line { position: absolute; inset: 12px; border: 1px solid var(--w-accent-soft); border-radius: 50%; z-index: 1; }
.tesbih-ring .bead { position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%,-50%); background: rgba(218,145,78,.25); z-index: 2; }
.tesbih-ring .bead.passed { background: rgba(218,145,78,.85); }
.tesbih-ring .bead.active { background: var(--w-accent); box-shadow: 0 0 0 7px rgba(218,145,78,.20); }
.tesbih-ring .bead::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.6), transparent 60%); }
.tesbih-ring .ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; z-index: 3; }
.tesbih-ring .ring-center .num { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 26px; font-weight: 700; color: var(--w-accent); line-height: 1; }
.tesbih-ring .ring-center .tot { font-family: ui-monospace, monospace; font-size: 12px; color: var(--w-sec); }
.tesbih-widget .t-right { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tesbih-widget .arabic { font-size: 19px; font-weight: 500; }
.tesbih-widget .zname { font-size: 12px; color: var(--w-sec); }
.pill-btn { display: inline-flex; align-items: center; gap: 5px; background: var(--w-accent); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 999px; }
.pill-btn svg { width: 13px; height: 13px; }

/* ---------- Namaz Vakitleri widget ---------- */
.prayer-widget .loc { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--w-sec); margin-bottom: 10px; }
.prayer-widget .loc svg { width: 11px; height: 11px; }
.prayer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.prayer-grid .cell { text-align: center; padding: 6px 2px; border-radius: 9px; }
.prayer-grid .cell .pname { font-size: 9px; color: var(--w-sec); }
.prayer-grid .cell .ptime { font-family: ui-monospace, monospace; font-size: 14px; font-weight: 600; }
.prayer-grid .cell.current { background: var(--w-accent); }
.prayer-grid .cell.current .pname, .prayer-grid .cell.current .ptime { color: #fff; }

/* ---------- Günün Ayeti widget (kare) ---------- */
.ayah-widget .title { font-size: 9px; font-weight: 700; letter-spacing: .04em; color: var(--w-accent); margin-bottom: 6px; }
.ayah-widget .atext { font-size: 12.5px; line-height: 1.45; color: var(--w-ink); flex: 1; }
.ayah-widget .asrc { font-size: 9px; color: var(--w-sec); margin-top: 6px; }

/* ---------- Namaz Vakitleri Büyük widget ---------- */
.prayer-large .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.prayer-large .head .loc { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 5px; }
.prayer-large .head .moon { color: var(--w-accent); }
.prayer-large .head .moon svg { width: 22px; height: 22px; }
.prayer-large .prow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--w-line); }
.prayer-large .prow:last-child { border-bottom: none; }
.prayer-large .prow .dot { width: 8px; height: 8px; border-radius: 50%; background: #cfc6bd; flex: 0 0 auto; }
.prayer-large .prow .pn { font-size: 14px; flex: 1; }
.prayer-large .prow .pt { font-family: ui-monospace, monospace; font-size: 14px; font-weight: 600; color: var(--w-sec); }
.prayer-large .prow.current .dot { background: var(--w-accent); }
.prayer-large .prow.current .pn, .prayer-large .prow.current .pt { color: var(--w-accent); font-weight: 700; }
.prayer-large .prow.current .now { font-size: 10px; color: var(--w-accent); margin-right: 4px; }

/* =================================================================
   TELEFON İÇİ EKRANLAR (status bar + app içeriği, hepsi CSS)
   ================================================================= */
.app-screen { width: 100%; height: 100%; background: #FFFCF7; color: var(--w-ink); display: flex; flex-direction: column; font-size: 13px; text-align: left; }
.app-screen .statusbar { display: flex; justify-content: space-between; align-items: center; padding: 9px 20px 4px; font-size: 12px; font-weight: 600; color: var(--w-ink); }
.app-screen .statusbar .dots { display: flex; gap: 3px; align-items: center; }
.app-screen .statusbar .dots span { width: 15px; height: 10px; background: var(--w-ink); border-radius: 2px; display: inline-block; }
.app-screen .scr-body { flex: 1; overflow: hidden; padding: 6px 16px 16px; }
.app-screen .tabbar { display: flex; justify-content: space-around; padding: 9px 8px 14px; border-top: 1px solid var(--w-line); background: rgba(255,252,247,.9); }
.app-screen .tabbar .tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 9px; color: #b3a99d; }
.app-screen .tabbar .tab svg { width: 21px; height: 21px; }
.app-screen .tabbar .tab.active { color: var(--w-accent); }

/* Home ekran: namaz geri sayım kartı + hızlı erişim */
.scr-prayer-card { background: #fff; border-radius: 20px; padding: 16px; box-shadow: 0 6px 18px rgba(120,80,40,.10); text-align: center; }
.scr-prayer-card .loc { font-size: 11px; color: var(--w-sec); display: flex; align-items: center; justify-content: center; gap: 4px; }
.scr-prayer-card .loc svg { width: 11px; height: 11px; }
.scr-prayer-card .label { font-size: 11px; color: var(--w-sec); margin-top: 12px; }
.scr-prayer-card .countdown { font-size: 40px; font-weight: 700; color: var(--w-accent); line-height: 1.05; font-variant-numeric: tabular-nums; }
.scr-prayer-card .nextp { font-size: 12px; color: var(--w-ink); margin-top: 4px; font-weight: 600; }
.scr-section-title { font-size: 12px; font-weight: 700; color: var(--w-ink); margin: 16px 2px 8px; }
.scr-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.scr-tile { background: #fff; border-radius: 15px; padding: 11px 4px; text-align: center; box-shadow: 0 4px 12px rgba(120,80,40,.07); }
.scr-tile .ti { width: 30px; height: 30px; border-radius: 9px; background: var(--w-accent-soft); color: var(--w-accent); display: grid; place-items: center; margin: 0 auto 6px; }
.scr-tile .ti svg { width: 16px; height: 16px; }
.scr-tile .tl { font-size: 9px; color: var(--w-sec); }
.scr-dua-card { display: flex; align-items: center; gap: 10px; background: linear-gradient(120deg,#fff,#fff6ea); border-radius: 16px; padding: 12px 14px; margin-top: 12px; box-shadow: 0 4px 12px rgba(120,80,40,.07); }
.scr-dua-card .di { width: 38px; height: 38px; border-radius: 11px; background: var(--w-accent); color:#fff; display: grid; place-items: center; }
.scr-dua-card .di svg { width: 20px; height: 20px; }
.scr-dua-card .dt b { font-size: 13px; } .scr-dua-card .dt span { display: block; font-size: 10px; color: var(--w-sec); }

/* Tesbih ekranı */
.scr-tesbih { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 18px; }
.scr-tesbih .big-ring { width: 160px; height: 160px; }
.scr-tesbih .zikir-name { font-size: 16px; font-weight: 600; }
.scr-tesbih .zikir-ar { font-size: 26px; color: var(--w-accent); }

/* İmam (sohbet) ekranı */
.scr-chat { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.scr-chat .chat-head { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--w-line); }
.scr-chat .chat-head .av { width: 34px; height: 34px; border-radius: 50%; background: var(--w-accent); color:#fff; display:grid; place-items:center; }
.scr-chat .chat-head .av svg { width: 18px; height: 18px; }
.scr-chat .chat-head b { font-size: 14px; } .scr-chat .chat-head span { font-size: 10px; color: #5cae6b; }
.bubble { max-width: 78%; padding: 9px 13px; border-radius: 16px; font-size: 12px; line-height: 1.45; }
.bubble.them { background: #fff; box-shadow: 0 3px 10px rgba(120,80,40,.08); border-bottom-left-radius: 5px; align-self: flex-start; }
.bubble.me { background: var(--w-accent); color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }
.scr-chat .composer { margin-top: auto; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 8px 8px 8px 14px; box-shadow: 0 3px 10px rgba(120,80,40,.08); }
.scr-chat .composer .ph { flex: 1; font-size: 11px; color: #b3a99d; }
.scr-chat .composer .send { width: 28px; height: 28px; border-radius: 50%; background: var(--w-accent); color:#fff; display:grid; place-items:center; }
.scr-chat .composer .send svg { width: 14px; height: 14px; }

/* Kur'an ekranı */
.scr-quran .qhead { text-align: center; padding-bottom: 10px; border-bottom: 1px solid var(--w-line); }
.scr-quran .qhead .sname { font-size: 17px; font-weight: 700; }
.scr-quran .qhead .smeta { font-size: 10px; color: var(--w-sec); }
.scr-quran .ayah { padding: 12px 2px; border-bottom: 1px solid var(--w-line); }
.scr-quran .ayah .row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.scr-quran .ayah .badge { width: 22px; height: 22px; border-radius: 50%; background: var(--w-accent-soft); color: var(--w-accent); font-size: 10px; font-weight: 700; display: grid; place-items: center; flex: 0 0 auto; }
.scr-quran .ayah .ar { flex: 1; text-align: right; font-size: 19px; color: var(--w-ink); }
.scr-quran .ayah .tr { font-size: 11px; color: var(--w-sec); line-height: 1.5; }

/* =================================================================
   ROUNDED BOX — gerçek ekran görüntüsü tutucu (telefon çerçevesi YOK)
   PNG eklenince otomatik gösterilir; yoksa CSS arayüz yedek kalır.
   ================================================================= */
.shot-box {
  position: relative; width: min(300px, 78vw); aspect-ratio: 9 / 19.5;
  border-radius: 34px; overflow: hidden; margin-inline: auto;
  background: linear-gradient(165deg, var(--w-accent-soft), #fff);
  box-shadow: 0 40px 80px rgba(120,80,40,.18), inset 0 0 0 1px rgba(255,255,255,.45);
}
.shot-box .shot-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; display: none; }
.shot-box .shot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.shot-box .shot-fallback { position: absolute; inset: 0; z-index: 1; }
.shot-box .shot-fallback .app-screen { height: 100%; }
.shot-box.has-img .shot-fallback { display: none; }
.shot-box.has-video .shot-video { display: block; }
.shot-box.has-video .shot-img,
.shot-box.has-video .shot-fallback { display: none; }

/* =================================================================
   KİLİT EKRANI sahnesi + accessory (Lock Screen) zikir widget'ları
   ZikirWidget.swift: accessoryCircular (gauge) + accessoryRectangular + inline
   ================================================================= */
.lock-scene {
  position: relative; border-radius: 38px; overflow: hidden; color: #fff;
  padding: 1.8rem 1.5rem 1.4rem; aspect-ratio: 10/11; max-width: 460px; margin-inline: auto;
  background:
    radial-gradient(70% 40% at 80% 8%, rgba(255,238,200,.35), transparent 60%),
    linear-gradient(180deg, #16203a 0%, #2a2f4e 38%, #7d5a48 72%, #d68a4e 92%, #f0b06a 100%);
  box-shadow: 0 30px 70px rgba(120,80,40,.22), inset 0 0 0 1px rgba(255,255,255,.12);
}
.lock-scene .crescent { position: absolute; top: 26px; right: 34px; width: 30px; height: 30px; border-radius: 50%; box-shadow: 7px 7px 0 0 #fdeccb; opacity: .9; }
.lock-scene .lock-icon { display: flex; justify-content: center; margin-bottom: 14px; opacity: .9; }
.lock-scene .lock-icon svg { width: 17px; height: 17px; }
.lock-inline { text-align: center; font-size: 12px; font-weight: 500; opacity: .92; margin-bottom: 4px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.lock-inline svg { width: 12px; height: 12px; }
.lock-date { text-align: center; font-size: 13px; font-weight: 600; opacity: .85; }
.lock-clock { text-align: center; font-size: 74px; font-weight: 600; line-height: .96; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 24px rgba(0,0,0,.2); }
.lock-widgets { display: flex; align-items: stretch; gap: 12px; margin-top: 18px; }

/* Accessory circular (gauge) — conic-gradient ile ilerleme halkası */
.acc-circular { flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(#fff calc(var(--p,.58) * 360deg), rgba(255,255,255,.28) 0); }
.acc-circular::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: rgba(20,24,40,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.acc-circular .v { position: relative; z-index: 1; font-size: 18px; font-weight: 700; font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif; }
.acc-circular .glyph { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 1; opacity: .85; }
.acc-circular .glyph svg { width: 9px; height: 9px; }

/* Accessory rectangular — glassy kart */
.acc-rect { flex: 1; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 8px 12px; }
.acc-rect .acc-circular { width: 42px; height: 42px; }
.acc-rect .acc-circular .v { font-size: 13px; }
.acc-rect .acc-circular .glyph { display: none; }
.acc-rect .info b { font-size: 13px; font-weight: 600; display: block; }
.acc-rect .info span { font-size: 12px; opacity: .8; }
.lock-bottom { display: flex; justify-content: space-between; margin-top: auto; padding-top: 22px; }
.lock-bottom .lb { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; backdrop-filter: blur(8px); }
.lock-bottom .lb svg { width: 18px; height: 18px; }

/* Sahne etiketi */
.scene-label { text-align: center; font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft); margin-top: 1rem; text-transform: uppercase; }

/* İki video yan yana — iPhone çerçevesi YOK, rounded alan (hero gibi) */
.widgets-phones { display: grid; grid-template-columns: auto auto; justify-content: center; gap: clamp(0.8rem, 2vw, 1.4rem); align-items: start; }
.widgets-phones > div { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.widgets-phones .scene-label { margin-top: 1.2rem; }

/* Widget video alanı: çerçevesiz, yuvarlak köşeli kutu */
.wmedia {
  position: relative; width: min(300px, 80vw); aspect-ratio: 9 / 19.5;
  border-radius: 34px; overflow: hidden;
  background: linear-gradient(165deg, var(--accent-soft), #fff);
  box-shadow: 0 40px 80px rgba(120,80,40,.18), inset 0 0 0 1px rgba(255,255,255,.45);
}
.wmedia .wvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.wmedia.has-video .wvideo { display: block; }
.wmedia .wph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; text-align: center; padding: 1.5rem; color: var(--accent-dark); }
.wmedia.has-video .wph { display: none; }
.wmedia .wph .ph-ic { width: 52px; height: 52px; border-radius: 15px; background: rgba(255,255,255,.65); display: grid; place-items: center; }
.wmedia .wph .ph-ic svg { width: 26px; height: 26px; }
.wmedia .wph b { font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--ink); }
.wmedia .wph small { font-size: .72rem; color: var(--ink-faint); word-break: break-all; }

/* =================================================================
   "İçeriden bir bakış" — otomatik geçişli telefon gösterimi (player)
   ================================================================= */
.player { max-width: 330px; margin: 0 auto; }
.player .phone { width: 100%; }
.player-stage { position: relative; width: 100%; height: 100%; }
.player-screen { position: absolute; inset: 0; opacity: 0; transform: translateX(10%) scale(.96); transition: opacity .65s var(--ease), transform .65s var(--ease); pointer-events: none; }
.player-screen.active { opacity: 1; transform: none; }
.player-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2.2rem; }
.ptab { font-size: .92rem; font-weight: 500; color: var(--ink-soft); padding: .55rem 1.2rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); transition: all .3s var(--ease); }
.ptab.active { color: #fff; background: var(--accent-dark); border-color: var(--accent-dark); }
.ptab:hover { transform: translateY(-2px); }
.player-progress { width: 120px; height: 3px; border-radius: 999px; background: var(--line); margin: 1.4rem auto 0; overflow: hidden; }
.player-progress i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.player-progress i.run { animation: pgrun 3.6s linear forwards; }
@keyframes pgrun { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 760px) {
  /* İki widget videosu mobilde de yan yana — daha küçük göster */
  .widgets-phones { grid-template-columns: 1fr 1fr; gap: clamp(.7rem, 3vw, 1.4rem); }
  .widgets-phones > div { width: 100%; }
  .widgets-phones .wmedia { width: 100%; }
  .widgets-phones .scene-label { margin-top: .8rem; font-size: .72rem; }
}
@media (max-width: 600px) {
  .widgets-row { grid-template-columns: 1fr; }
  .ios-widget.span-2 { grid-column: span 1; }
}