/* Mihrâb — üst çubuk/güvenli alan düzeltmesi, vakit kartı kısayolları ve ek bilgiler */

/* Üst çubuk, telefonun durum çubuğu alanını (çentik) kendisi kaplar; içerik altından geçerken
   kartların üstü çubuğun arkasında kalmaz, sayfa açılışında kart tam görünür. */
.top{top:0;padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--bg) 94%,transparent)}
.reader-head{top:var(--ust,64px)}
html{scroll-padding-top:calc(var(--ust,64px) + 12px)}
main.wrap{padding-top:22px}
@media (max-width:720px){main.wrap{padding-top:16px}}

/* Konum ve Kıble yan yana */
.hero-kisa{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:8px;margin-top:16px}
.hero .hero-kisa .loc-btn{margin:0;min-width:0;width:100%}
.hero-kisa .loc-btn > span{min-width:0}
.hero-kisa .loc-btn > span > span,.hero-kisa .loc-btn small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:720px){
  .hero-kisa{grid-template-columns:1fr 1fr}
  .hero .hero-kisa .loc-btn{padding:9px 10px;gap:8px;border-radius:12px}
  .hero-kisa .loc-btn svg{width:16px;height:16px}
  .hero-kisa .loc-btn > span > span{font-size:.92rem}
  .hero-kisa .loc-btn small{font-size:.72rem}
}

/* Vakit kartında ek bilgiler */
.hero-bilgi{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.hero-bilgi > *{display:flex;align-items:center;gap:10px;min-width:0;border-radius:14px;padding:10px 12px;border:1px solid rgba(212,175,90,.18);background:rgba(255,255,255,.04);color:#ECE6D6;text-align:left}
.hero-bilgi button{cursor:pointer}
.hero-bilgi button:hover{background:rgba(255,255,255,.08)}
.hero-bilgi svg{width:18px;height:18px;flex:none;color:#D4AF5A}
.hero-bilgi span{min-width:0;display:grid}
.hero-bilgi b{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-bilgi small{font-size:.72rem;color:#A9A296;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:720px){
  .hero-bilgi{grid-template-columns:1fr 1fr}
  .hero-bilgi > :first-child{grid-column:1 / -1}
}

/* Vakti girmemiş namaz */
.nz.bekliyor{opacity:.5;cursor:not-allowed}
.nz.bekliyor .tick{border-style:dashed}
.nz.bekliyor:hover{border-color:var(--line)}
@media (max-width:720px){.hero-bilgi b{white-space:normal;line-height:1.25}}

/* Geri düğmesi */
.section-head.geri-var{justify-content:flex-start;align-items:center;column-gap:12px}
.section-head.geri-var h2{margin-right:auto}
.section-head.geri-var h2::before{display:none}
.geri-btn{flex:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;box-shadow:var(--shadow-sm);padding:0}
.geri-btn:hover{border-color:var(--accent)}
.geri-btn:active{transform:scale(.95)}
.geri-btn svg{width:20px;height:20px}
@media (max-width:720px){
  .section-head.geri-var{column-gap:10px}
  .geri-btn{width:38px;height:38px}
  .section-head.geri-var .search{flex-basis:100%}
}

/* Zikirmatik: telefonda sayaç ve düğmeler tek ekrana sığar */
.zk-alt{display:flex;align-items:center;justify-content:center;gap:10px 18px;flex-wrap:wrap;margin-top:14px}
.zk-toplam{margin:0;font-size:.9rem;color:var(--muted)}
.zk-toplam b{color:var(--ink)}
.zk-alt .zk-hedef{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;max-width:none}
.zk-alt .zk-hedef .field{display:flex;align-items:center;gap:8px}
.zk-alt .zk-hedef .field label{margin:0;white-space:nowrap}
.zk-alt .zk-hedef select{width:auto;padding:7px 30px 7px 12px;border-radius:10px}
.zk-alt .zk-hedef .cubuk{width:100%;margin:2px 0 0}
@media (max-width:720px){
  #v-zikir .section-head{margin-bottom:10px}
  #v-zikir .zikir{gap:6px}
  #v-zikir .zk-prog{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px 8px;padding:2px 14px}
  #v-zikir .zk-prog::-webkit-scrollbar{display:none}
  #v-zikir .zk-prog > *{flex:none}
  #v-zikir .chip{padding:7px 13px;font-size:.88rem}
  #v-zikir .zk-ar{font-size:1.85rem;line-height:1.5;margin:4px 0 0}
  #v-zikir .zk-tr{font-size:.95rem}
  #v-zikir #zkMn{font-size:.84rem;margin-top:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Sayaç, ekranın kalan yüksekliğine göre küçülür */
  #v-zikir .counter{width:clamp(170px,min(70vw,calc(100vh - var(--ust,64px) - var(--alt,72px) - 400px)),300px)}
  @supports (height:100dvh){#v-zikir .counter{width:clamp(170px,min(70vw,calc(100dvh - var(--ust,64px) - var(--alt,72px) - 400px)),300px)}}
  #v-zikir .counter .num{font-size:clamp(2.6rem,11vw,4.2rem)}
  #v-zikir .zk-actions{margin-top:10px}
  #v-zikir .zk-actions .btn{padding:8px 18px}
  #v-zikir .zk-alt{margin-top:10px;gap:6px 14px}
  #v-zikir .zk-alt .zk-hedef .field label{font-size:.82rem}
  #v-zikir .zk-alt .zk-hedef select{font-size:16px;padding:6px 28px 6px 10px}
  #v-zikir #zkMsg{min-height:0;margin-top:6px}
  #v-zikir .zk-aktif{padding:8px 12px}
}
/* Kısa ekranlar (iPhone SE vb.) */
@media (max-width:720px) and (max-height:700px){
  #v-zikir .section-head{margin-bottom:6px}
  #v-zikir .zk-prog{margin-bottom:6px}
  #v-zikir .chip{padding:6px 12px;font-size:.84rem}
  #v-zikir .zk-ar{font-size:1.55rem;margin:2px 0 0}
  #v-zikir #zkMn{display:none}
  #v-zikir .counter{width:clamp(150px,min(64vw,calc(100vh - var(--ust,64px) - var(--alt,72px) - 330px)),260px)}
  @supports (height:100dvh){#v-zikir .counter{width:clamp(150px,min(64vw,calc(100dvh - var(--ust,64px) - var(--alt,72px) - 330px)),260px)}}
  #v-zikir .zk-actions{margin-top:8px}
  #v-zikir .zk-alt{margin-top:6px}
}
@media (max-width:720px){
  #v-zikir .zk-alt{flex-wrap:nowrap}
  #v-zikir .zk-alt .zk-hedef{flex-wrap:nowrap}
  #v-zikir .zk-alt .zk-hedef .cubuk{display:none}          /* telefonda yalnızca "34 / 100" yazısı */
  #v-zikir .zk-alt .zk-hedef small{white-space:nowrap}
}