/* ==========================================================================
   RNK WebOS — pencere sistemli okuyucu (HRN WebOS tasarim dili)
   ========================================================================== */
/* --- gomulu fontlar (fonts/, yerel; CDN yok) --- */
@font-face{font-family:"RNK Taha";src:url("../fonts/osmantaha.ttf");font-weight:400;font-display:swap}
@font-face{font-family:"RNK Taha";src:url("../fonts/osmantahabd.ttf");font-weight:700;font-display:swap}
@font-face{font-family:"RNK Mumtaz";src:url("../fonts/mumtaz.ttf");font-display:swap}
@font-face{font-family:"RNK Souvenir";src:url("../fonts/souvenir.ttf");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"RNK Souvenir";src:url("../fonts/souvenirbd.ttf");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"RNK Souvenir";src:url("../fonts/souveniri.ttf");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"RNK Souvenir";src:url("../fonts/souvenirbi.ttf");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"RNK Times";src:url("../fonts/times.ttf");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"RNK Times";src:url("../fonts/timesbd.ttf");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"RNK Times";src:url("../fonts/timesi.ttf");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"RNK Times";src:url("../fonts/timesbi.ttf");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"RNK Arial";src:url("../fonts/arial.ttf");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"RNK Arial";src:url("../fonts/arialbd.ttf");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"RNK Arial";src:url("../fonts/ariali.ttf");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"RNK Arial";src:url("../fonts/arialbi.ttf");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"RNK Verdana";src:url("../fonts/verdana.ttf");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"RNK Verdana";src:url("../fonts/verdanabd.ttf");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"RNK Verdana";src:url("../fonts/verdanai.ttf");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"RNK Verdana";src:url("../fonts/verdanabi.ttf");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"RNK Corsiva";src:url("../fonts/corsiva.ttf");font-display:swap}
/* ayet numarasi madalyonlari (gul icinde rakam, U+C739..C856 = 1..286) */
@font-face{font-family:"RNK Ayet";src:url("../fonts/ayetrakam.ttf");font-display:swap}

:root{
  --masa:#e9ecf3;         --masa2:#dfe4ee;
  --yzey:#ffffff;         --yzey2:#f6f8fb;
  --cizgi:#e2e7f0;        --cizgi2:#cdd5e3;
  --metin:#1c2433;        --metin2:#6b7690;
  --pri:#4f63d2;          --pri-acik:#eef1fd;   --pri-koyu:#3b4cb0;
  --kagit:#fbf7ee;        --kagit-cizgi:#e6dcc2;--kagit-metin:#241c0e;
  --kagit-baslik:#6e4610;
  --syf:#b8a878;          --syf-cizgi:#dcd0b2;
  --isaret:#ffe9a8;
  --vurgu:#b98a2f;
  --hypr-a:#3bc9ff;       --hypr-b:#a066ff;   /* Hyprland aktif pencere gradyanı */
  --cam:rgba(255,255,255,.72);   /* tepe bar + dock buzlu cami : js yzey'den turetir */
  --golge:0 4px 18px rgba(30,40,70,.10);
  --golge2:0 18px 50px rgba(30,40,70,.25);
  --okuma-punto:15pt;
  --metin-font:"RNK Souvenir","Segoe UI",system-ui,serif;
  --ar-font:"RNK Taha","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Segoe UI",system-ui,Arial,sans-serif;
  background:linear-gradient(160deg,var(--masa),var(--masa2));
  color:var(--metin);
  overflow:hidden;
  font-size:14px;
}
.gizli{display:none !important}
button{font-family:inherit}

/* ================= tepe bar ================= */
.tepe{
  position:fixed;top:0;left:0;right:0;height:40px;z-index:900;
  display:flex;align-items:center;gap:16px;padding:0 14px;
  background:var(--cam);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cizgi);
}
.tepe-marka{display:flex;align-items:baseline;gap:6px;font-size:15px}
.tepe-marka b{letter-spacing:.5px}
.tepe-marka span{color:var(--metin2);font-size:12.5px}
.tepe-ara{position:relative}
.tepe-ara input{
  width:280px;padding:6px 14px;font-size:13px;outline:none;
  border:1px solid var(--cizgi2);border-radius:999px;background:var(--yzey);
}
.tepe-ara input:focus{border-color:var(--pri)}
.ara-acilir{
  position:absolute;top:36px;left:0;width:340px;max-height:50vh;overflow-y:auto;
  background:var(--yzey);border:1px solid var(--cizgi);border-radius:12px;
  box-shadow:var(--golge2);padding:6px;
}
.ara-acilir .oge{
  display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;cursor:pointer;
}
.ara-acilir .oge:hover{background:var(--pri-acik)}
.ara-acilir .oge img{width:26px;height:38px;object-fit:cover;border-radius:4px}
.ara-acilir .oge .k{font-size:11px;color:var(--metin2)}
.tepe-sag{margin-left:auto;color:var(--metin2);font-size:12.5px}

/* ================= masaustu ================= */
#masaustu{position:fixed;inset:40px 0 0 0}

/* ================= dock ================= */
/* dis kap seffaf ve kirpmasiz -> etiket ve buyuyen ikonlar tepsinin
   ustune tasabilir (onceden overflow-x etiketleri kirpiyordu) */
.dock{
  position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:950;
  max-width:96vw;
}
.dock-tepsi{
  position:relative;
  display:flex;gap:6px;align-items:flex-end;
  background:var(--cam);backdrop-filter:blur(14px);
  border:1px solid var(--cizgi);border-radius:20px;
  padding:8px 12px;box-shadow:var(--golge2);
}
.dock-oge{position:relative;display:flex;flex-direction:column;align-items:center}
.dock-oge button{
  width:52px;height:52px;border-radius:14px;border:none;cursor:pointer;
  background:var(--yzey2);font-size:26px;line-height:1;
  transition:transform .09s ease-out,background .12s;
  transform-origin:50% 100%;
  display:flex;align-items:center;justify-content:center;
}
.dock-oge button:hover{background:var(--pri-acik)}
.dock-oge .etiket{
  position:absolute;bottom:104px;left:50%;
  transform:translateX(-50%) translateY(6px);
  background:#20283a;color:#fff;font-size:11.5px;font-weight:600;
  padding:4px 10px;border-radius:8px;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .15s,transform .15s;
  z-index:5;
}
.dock-oge:hover .etiket{opacity:1;transform:translateX(-50%) translateY(0)}
.dock-oge .nokta{
  width:4px;height:4px;border-radius:50%;background:var(--pri);
  margin-top:3px;opacity:0;
}
.dock-oge.acik .nokta{opacity:1}
@media (max-width:760px){
  /* dar ekranda tepsi kaydirilabilir; buyutec animasyonu js'te kapali kalir */
  .dock-tepsi{overflow-x:auto}
  .dock-oge .etiket{display:none}
}

/* ================= pencere (Hyprland tarzı döşeme) ================= */
/* gradyan kenarlık : cift arka plan hilesi (padding-box gövde + border-box
   gradyan) -> yuvarlak köşeli gradyan çerçeve, overflow:hidden ile uyumlu */
.pencere{
  position:absolute;display:flex;flex-direction:column;
  min-width:190px;min-height:130px;
  border:2px solid transparent;border-radius:12px;
  background:
    linear-gradient(var(--yzey),var(--yzey)) padding-box,
    linear-gradient(130deg,var(--cizgi2),var(--cizgi2)) border-box;
  box-shadow:var(--golge);
  overflow:hidden;
  transition:left .2s cubic-bezier(.2,.85,.25,1),
             top .2s cubic-bezier(.2,.85,.25,1),
             width .2s cubic-bezier(.2,.85,.25,1),
             height .2s cubic-bezier(.2,.85,.25,1),
             box-shadow .18s, background .3s;
}
.pencere.aktif{
  background:
    linear-gradient(var(--yzey),var(--yzey)) padding-box,
    linear-gradient(130deg,var(--hypr-a),var(--hypr-b)) border-box;
  box-shadow:var(--golge2);
}
.pencere.kayan{transition:none}                 /* serbest sürükleme sırasında */
.wm-boyut .pencere{transition:none}             /* döşeme boyutlandırma sırasında */
.pencere.serbest{resize:both;box-shadow:var(--golge2)}
.pencere.tamekran{border-radius:0}
.pencere.suruklenen{opacity:.9;box-shadow:var(--golge2)}
.pencere.hedef{outline:3px solid var(--hypr-a);outline-offset:-3px}

@keyframes wm-acilis{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes wm-kapanis{to{opacity:0;transform:scale(.9)}}
.pencere.acilis{animation:wm-acilis .18s ease-out}
.pencere.kapanis{animation:wm-kapanis .16s ease-in forwards;pointer-events:none}

/* döşeme boyutlandırma tutamakları (boşlukta durur) */
.rz-r,.rz-b{position:absolute;z-index:6}
.rz-r{top:10px;bottom:10px;right:-6px;width:12px;cursor:col-resize}
.rz-b{left:10px;right:10px;bottom:-6px;height:12px;cursor:row-resize}
.pencere.serbest .rz-r,.pencere.serbest .rz-b,
.pencere.tamekran .rz-r,.pencere.tamekran .rz-b{display:none}
.p-bas{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  height:40px;padding:0 12px;
  background:var(--yzey2);border-bottom:1px solid var(--cizgi);
  cursor:grab;user-select:none;
}
.p-bas:active{cursor:grabbing}
.p-toplar{display:flex;gap:7px}
.p-top{width:12px;height:12px;border-radius:50%;border:none;cursor:pointer;padding:0}
.p-top.kirmizi{background:#ff5f57}
.p-top.sari{background:#febc2e}
.p-top.yesil{background:#28c840}
.p-ad{
  font-weight:700;font-size:13.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:flex;align-items:center;gap:8px;min-width:0;
}
.p-ad .pikon{font-size:15px}
.p-govde{flex:1;overflow:hidden;display:flex;flex-direction:column;position:relative}

/* ================= kategori penceresi ================= */
.kitap-izgara{
  flex:1;overflow-y:auto;padding:16px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px;
  align-content:start;
}
.kitap{cursor:pointer;text-align:center;transition:transform .1s}
.kitap:hover{transform:translateY(-3px)}
.kitap .kapak{
  width:96px;height:137px;border-radius:8px;object-fit:cover;
  border:1px solid var(--cizgi);box-shadow:var(--golge);background:var(--kagit);
}
.kitap .kapak-yok{
  width:96px;height:137px;margin:0 auto;border-radius:8px;
  background:linear-gradient(160deg,#f8f0dd,#eadfc4);
  border:1px solid var(--kagit-cizgi);box-shadow:var(--golge);
  display:flex;align-items:center;justify-content:center;
  padding:8px;font-size:11.5px;font-weight:600;color:#6e4610;line-height:1.35;
}
.kitap .ad{
  margin-top:6px;font-size:11px;color:var(--metin2);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.liste-bos{padding:34px;text-align:center;color:var(--metin2);font-size:13px}

/* liste satiri (son okunanlar vb) */
.kitap-liste{flex:1;overflow-y:auto;padding:10px 12px}
.kl-satir{
  display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;cursor:pointer;
}
.kl-satir:hover{background:var(--pri-acik)}
.kl-satir img,.kl-satir .kapak-yok{width:34px;height:48px;border-radius:5px;object-fit:cover;flex:0 0 auto}
.kl-satir .kapak-yok{font-size:0;padding:0}
.kl-satir .b{flex:1;min-width:0}
.kl-satir .b .a{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kl-satir .b .k{font-size:11.5px;color:var(--metin2)}
.kl-satir .sag{color:var(--metin2);font-size:11.5px;flex:0 0 auto}

/* ================= okuyucu penceresi ================= */
.oku-arac{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:7px 10px;border-bottom:1px solid var(--cizgi);background:var(--yzey);
}
.btn{
  border:1px solid var(--cizgi2);background:var(--yzey);color:var(--pri-koyu);
  padding:5px 11px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;
  white-space:nowrap;
}
.btn:hover{background:var(--pri-acik)}
.btn.aktif{background:var(--pri);color:#fff;border-color:var(--pri)}
.sayfa-rozet{
  background:var(--pri-acik);border:1px solid var(--cizgi);
  padding:4px 11px;border-radius:999px;font-size:12px;color:var(--pri-koyu);white-space:nowrap;
}
.sayfa-git{display:flex;align-items:center;gap:4px}
.sayfa-git input{
  width:52px;padding:5px 7px;border:1px solid var(--cizgi2);border-radius:8px;
  font-size:12.5px;text-align:center;outline:none;
}
.sayfa-git input.hata{background:#fde8e0;border-color:#e2a48c}

.oku-govde{flex:1;display:flex;overflow:hidden;position:relative}
.oku-kap{flex:1;overflow-y:auto;background:var(--kagit)}
.icerik{
  max-width:56em;margin:0 auto;padding:26px 30px 60px;
  font-family:var(--metin-font);
  font-size:var(--okuma-punto);line-height:1.95;color:var(--kagit-metin);
}
.icerik p{text-align:justify;text-indent:1.5em;margin:0 0 .5em}
.icerik p.devam{text-indent:0;margin-top:0}
.icerik h2,.icerik h3,.icerik h4{text-align:center;margin:.9em 0 .6em;color:var(--kagit-baslik)}
.icerik h3{font-size:1.15em}
.icerik h4{font-size:1.05em}
.icerik .syf{
  display:flex;align-items:center;gap:10px;
  color:var(--syf);font-size:.65em;margin:1.1em 0 .7em;user-select:none;
}
.icerik .syf::before,.icerik .syf::after{content:"";flex:1;border-top:1px dotted var(--syf-cizgi)}
.icerik .ar{font-family:var(--ar-font);font-size:1.55em;line-height:1.5}
/* aramadan gelen isaret : bulunan kelimeler secili gorunur */
.icerik mark.bulgu{
  background:var(--isaret);color:inherit;border-radius:4px;padding:0 2px;
  animation:bulgu-parla 1s ease-out 2;
}
@keyframes bulgu-parla{
  0%{box-shadow:0 0 0 6px var(--isaret)}
  100%{box-shadow:0 0 0 0 transparent}
}
.sonuc .ar,.fh .ar{font-family:var(--ar-font)}
/* ayet numarasi : madalyon (varsayilan) / duz ﴾١٧﴿ (rozetsiz modda) */
.icerik .ayet-m{font-family:"RNK Ayet";font-size:1.6em;line-height:1;color:var(--vurgu);padding:0 .08em;vertical-align:-.12em}
.icerik .ayet-d{display:none}
html.rozetsiz .icerik .ayet-m{display:none}
html.rozetsiz .icerik .ayet-d{display:inline}
.icerik.osmanlica p,.icerik.osmanlica h2,.icerik.osmanlica h3,.icerik.osmanlica h4{direction:rtl}
.icerik.osmanlica p{text-indent:0}

/* okuyucu yan paneli (fihrist/arama) */
.yan{
  position:absolute;top:0;right:0;bottom:0;width:340px;max-width:85%;
  background:var(--yzey);border-left:1px solid var(--cizgi);
  display:flex;flex-direction:column;box-shadow:-8px 0 24px rgba(30,40,70,.12);
  z-index:5;animation:kayar .16s ease-out;
}
@keyframes kayar{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.yan-bas{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:9px 12px;border-bottom:1px solid var(--cizgi);background:var(--yzey2);
}
.yan-bas b{flex:1;font-size:13.5px;color:var(--pri-koyu)}
.yan-bas input{
  flex:1;padding:6px 10px;border:1px solid var(--cizgi2);border-radius:8px;
  font-size:12.5px;outline:none;
}
.yan-icerik{flex:1;overflow-y:auto;padding:8px 12px 24px}
.yan-durum{padding:6px 12px;font-size:11.5px;color:var(--metin2);border-bottom:1px solid var(--cizgi)}

.fh{display:flex;align-items:baseline;gap:8px;padding:4px 2px;border-radius:6px;cursor:pointer;font-size:13px}
.fh:hover{background:var(--pri-acik)}
.fh .fs{margin-left:auto;color:var(--vurgu);font-size:11px;flex:0 0 auto}
.fh1{font-weight:700;margin-top:8px}
.fh2{margin-left:16px;font-size:12.5px}
.fh3{margin-left:32px;font-size:11.5px;color:var(--metin2)}

.sonuc{
  padding:8px 10px;margin:8px 0;border:1px solid var(--cizgi);border-radius:9px;
  background:var(--kagit);cursor:pointer;font-size:12.5px;line-height:1.55;color:var(--kagit-metin);
}
.sonuc:hover{border-color:var(--vurgu)}
.sonuc .s-syf{
  display:inline-block;background:var(--pri-acik);color:var(--pri-koyu);
  border-radius:6px;padding:1px 7px;font-weight:700;font-size:11px;margin-right:7px;
}
.sonuc mark{background:var(--isaret);color:inherit;padding:0 2px;border-radius:3px}

/* ================= kulliyat arama penceresi ================= */
.ara-buyuk{
  flex:1;padding:8px 14px;font-size:14px;outline:none;
  border:1px solid var(--cizgi2);border-radius:10px;background:var(--yzey);color:var(--metin);
}
.ara-buyuk:focus{border-color:var(--pri)}
.ara-govde{flex:1;overflow-y:auto;padding:10px 14px 24px}
.ara-ozet{font-size:12px;color:var(--metin2);padding:4px 0 8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ara-kelime{
  background:var(--pri-acik);color:var(--pri-koyu);border:1px solid var(--cizgi);
  border-radius:999px;padding:2px 9px;font-weight:600;font-size:11.5px;white-space:nowrap;
}
.ara-kitap{margin-bottom:14px}
.ara-kitap-bas{
  display:flex;align-items:center;gap:10px;
  padding:6px 8px;border-radius:9px;background:var(--yzey2);
  border:1px solid var(--cizgi);position:sticky;top:0;z-index:2;
}
.ara-kitap-bas img,.ara-kitap-bas .kapak-yok{width:26px;height:36px;border-radius:4px;object-fit:cover;font-size:0;padding:0}
.ara-kitap-bas b{flex:1;font-size:13px}
.ara-adet{font-size:11.5px;color:var(--metin2);white-space:nowrap}
.s-puan{
  display:inline-block;background:#f3e2c2;color:#7a5410;
  border-radius:6px;padding:1px 6px;font-weight:700;font-size:10.5px;margin-right:6px;
}
.j-devam{display:block;margin:8px auto 20px}

/* ================= not defteri ================= */
.not-govde{flex:1;display:flex;overflow:hidden}
.not-liste{
  width:200px;flex:0 0 auto;overflow-y:auto;
  border-right:1px solid var(--cizgi);background:var(--yzey2);
}
.not-oge{padding:9px 12px;border-bottom:1px solid var(--cizgi);cursor:pointer}
.not-oge:hover{background:var(--pri-acik)}
.not-oge.secili{background:var(--pri-acik);box-shadow:inset 3px 0 0 var(--pri)}
.not-bas{
  font-size:12.5px;font-weight:600;color:var(--metin);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.not-tar{font-size:10.5px;color:var(--metin2);margin-top:2px}
.not-bos{padding:22px 14px;text-align:center;color:var(--metin2);font-size:12px}
.not-alan{
  flex:1;border:none;outline:none;resize:none;padding:16px 22px;
  font-family:var(--metin-font);font-size:14.5px;line-height:1.75;
  background:var(--kagit);color:var(--kagit-metin);
}

/* ================= ayarlar ================= */
.ayarlar{flex:1;overflow-y:auto;padding:18px 20px}
.ayar-grup{margin-bottom:20px}
.ayar-grup h3{font-size:13.5px;margin-bottom:10px;color:var(--pri-koyu)}
.ayar-satir{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:13px}
.ayar-satir input[type=range]{flex:1}
.ayar-satir select{max-width:200px}
.ayar-deger{min-width:44px;text-align:right;color:var(--metin2)}
.ayar-ornek{
  margin-top:6px;padding:10px 14px;border:1px dashed var(--kagit-cizgi);
  border-radius:10px;background:var(--kagit);color:var(--kagit-metin);
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.ayar-ornek .mo{font-family:var(--metin-font);font-size:15px}
.ayar-ornek .ao{font-family:var(--ar-font);font-size:21px;direction:rtl}

/* tema secimi */
.tema-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 10px}
.tema-kart{
  border:1px solid var(--cizgi2);border-radius:10px;padding:7px 9px;cursor:pointer;
  background:var(--yzey);display:flex;align-items:center;gap:7px;font-size:12px;
  color:var(--metin);
}
.tema-kart:hover{border-color:var(--pri)}
.tema-kart.secili{border-color:var(--pri);background:var(--pri-acik)}
.tema-renkler{display:flex;gap:3px;flex:0 0 auto}
.tema-renkler i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(128,128,128,.35)}
details.renkler{margin-top:4px}
details.renkler summary{cursor:pointer;font-size:12.5px;color:var(--pri-koyu);padding:4px 0;user-select:none}
.renk-satir{display:flex;align-items:center;gap:10px;padding:2px 0;font-size:12.5px}
.renk-satir span{flex:1}
.renk-satir code{color:var(--metin2);font-size:11px;min-width:62px;text-align:right}
.renk-satir input[type=color]{
  width:44px;height:26px;border:1px solid var(--cizgi2);border-radius:6px;
  background:var(--yzey);padding:1px;cursor:pointer;
}

/* hesap / esitleme */
.hesap-durum{font-size:12.5px;color:var(--metin2);padding:4px 0;line-height:1.5}
.hesap-durum b{color:var(--metin)}
.ayar-satir input[type=text]{
  flex:1;padding:6px 9px;border:1px solid var(--cizgi2);border-radius:8px;
  font-size:12px;outline:none;background:var(--yzey);color:var(--metin);
}

/* ================= yukleniyor ================= */
.yukleniyor{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(240,243,248,.6);z-index:990;
}
.spin{
  width:44px;height:44px;border-radius:50%;
  border:4px solid var(--cizgi2);border-top-color:var(--pri);
  animation:don .8s linear infinite;
}
@keyframes don{to{transform:rotate(360deg)}}

@media (max-width:700px){
  .tepe-ara input{width:150px}
  .pencere{min-width:0;left:2vw !important;right:2vw !important;width:96vw !important}
}