/* Google Fonts'dan Poppins isimli Fontu Kullan  */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');


/* ================================================================================================
	Farklı tarayıcılar arasındaki farklılıkları gidermek için bazı özellikleri normalize et
================================================================================================ */

*, *:before, *:after { box-sizing:border-box; margin:0; padding:0; }
*:focus { outline:none; }
body { font-family:'Poppins'; font-weight:400; font-size:16px; color:#444; background-color:#FFF; line-height:1; cursor:default; }
input, select, textarea { font-family:inherit; appearance:none; }
a, a:active, a:visited, a:hover { text-decoration:none; }


/* ================================================================================================
	Header Kısmı
================================================================================================ */

header {}
header > section { padding:20px 30px; background-color:#6E28A6; color:#FFF; text-align:center; text-shadow:0 1px 1px rgba(0,0,0,0.5) }
header > section { display:flex; }
header > section .baslik { flex:1 1 0; }

header > section .baslik h2 { font-size:30px; font-weight:600; }
header > section .baslik h3 { font-size:16px; font-weight:400; }

header > section .button a { display:block; width:44px; height:44px; }
header > section .button a img { display:block; width:44px; height:44px; }

header > nav { background-color:#4C1A74; color:#FFF; text-align:center; text-shadow:0 1px 1px rgba(0,0,0,0.5) }
header > nav ul, header > nav ul li { list-style:none; }
header > nav ul li a { display:block; padding:20px 30px; border-left:4px solid transparent; color:#FFF; }
header > nav ul li.selected a { border-left: 4px solid #B1E819; background-color: rgba(0,0,0,0.2); }

@media(min-width:800px) {

header > nav ul { display:flex; align-items:center; justify-content:center; }
header > nav ul li a { border-left:none; border-top: 4px solid transparent; }
header > nav ul li.selected a { border-left:none; border-top: 4px solid #B1E819; background-color: rgba(0,0,0,0.2); }

}

/* ================================================================================================
	Admin Sayfa Header Kısmı Farklı Renk Olsun
================================================================================================ */

#site-wrapper.admin header > section { background-color:#222; }
#site-wrapper.admin header > nav { background-color:#6A5B5B; }
#site-wrapper.admin header > nav ul li.selected a { border-left: 4px solid #E00; }

@media(min-width:800px) {
#site-wrapper.admin header > nav ul li.selected a { border-left:none; border-top: 4px solid #E00; background-color: rgba(0,0,0,0.2); }
}


main .sayfa-wrapper { width:min(70rem, 100%); margin:0 auto; padding:30px 0; }
main .sayfa-wrapper h2.sayfa-basligi { font-size:2rem; padding:0 0 15px 0; margin:0 0 30px 0; border-bottom:2px dotted #444; }
main .sayfa-wrapper > h3 { font-size:1.3rem; font-weight:normal; margin-bottom:15px; }

main .sayfa-wrapper article { margin-bottom:30px; }
main .sayfa-wrapper article h3 { font-size:1.3rem; font-weight:normal; margin-bottom:15px; }
main .sayfa-wrapper article .icerik-wrapper {}

.yt-container { position:relative; width:100%; height:0; padding-bottom:56.25%; }
.yt-container > iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }


/* ================================================================================================
	Sistem Mesajı Tasarımı
================================================================================================ */

.sistem-mesaji { padding:20px; text-shadow:0px 1px 1px rgba(0,0,0,0.5); }
.sistem-mesaji h3 { margin-bottom:10px; }
.sistem-mesaji ul,
.sistem-mesaji ul li { list-style:disc inside; }
.sistem-mesaji.hata { background-color:#C00; color:#FFF; }


/* ================================================================================================
	Form Tasarımı
================================================================================================ */

.form-element { width:min(420px, 100%); }
.form-element .form-row { margin:0 0 15px 0; }
.form-element .form-row label { display:block; font-size:13px; font-weight:bold; margin:0 0 5px 0; }
.form-element .form-row input[type=text],
.form-element .form-row input[type=password] { font-size:16px; width:100%; padding:10px 10px; border:2px solid #CCC; }
.form-element .form-row select { font-size:16px; width:100%; padding:10px 10px; border:2px solid #CCC; }
.form-element .form-row textarea { font-size:16px; width:100%; padding:10px 10px; border:2px solid #CCC; resize:none; }
.form-element .form-row input[type=submit] { font-size:18px; font-weight:600; width:100%; padding:10px 10px; border:none; background-color:#33B089; color:#FFF; cursor:pointer; text-shadow:0 1px 1px rgba(0,0,0,0.5) }
.form-element .form-row a.submit-button { display:flex; align-items:center; line-height:normal; justify-content:center; font-size:18px; font-weight:600; width:100%; padding:10px 10px; border:none; background-color:#6A5B5B; color:#FFF; cursor:pointer; text-shadow:0 1px 1px rgba(0,0,0,0.5) }



/* ================================================================================================
	Veri Yönetim Paneli
================================================================================================ */

.veri-yonetim-paneli { margin:0 0 20px 0; }
.veri-yonetim-paneli a { display:inline-block; padding:8px 12px; background-color:#DDD; color:#444; font-weight:500; text-shadow:0 1px 1px rgba(0,0,0,0.5); }
.veri-yonetim-paneli a.yeni-ekle { color:#FFF; background-color:#33B089; }





/* ================================================================================================
	Tablo Tasarımı
================================================================================================ */

.veri-tablosu .seperator { padding:10px; margin:30px 0 10px 0; background-color:#6A5B5B; color:#FFF; text-shadow:0 1px 1px rgba(0,0,0,0.5) }
.veri-tablosu .trow { display:flex; flex-wrap:wrap; --gap-value:0px; gap:var(--gap-value); margin-bottom:var(--gap-value); border-bottom:2px dotted #AAA; }
.veri-tablosu .trow .tcell { display:flex; align-items:center; flex-grow:1; width:100%; padding:10px 15px; background:#FFF; }
.veri-tablosu .trow:nth-child(even) .tcell { background:#FFF; }
.veri-tablosu .trow .tcell.sml { max-width:100px; }
.veri-tablosu .trow .tcell.tc { justify-content:center; }

.veri-tablosu .trow.baslik { border:none; }
.veri-tablosu .trow.baslik .tcell { background-color:#444; color:#FFF; padding:15px 15px; font-weight:500; text-shadow:0 1px 1px rgba(0,0,0,0.5); }


.veri-tablosu.s2 .tcell  { width: calc(50% - var(--gap-value)); }
.veri-tablosu.s3 .tcell  { width: calc(33.33% - var(--gap-value)); }
.veri-tablosu.s4 .tcell  { width: calc(25%% - var(--gap-value)); }
.veri-tablosu.s5 .tcell  { width: calc(20%% - var(--gap-value)); }
.veri-tablosu.s6 .tcell  { width: calc(16.6%% - var(--gap-value)); }


.veri-tablosu .trow .tcell.with-icons { justify-content:center; gap:5px; }
.veri-tablosu .trow .tcell.with-icons a.icon { display:block; width:24px; height:24px; }



/* ================================================================================================
	İletişim Sayfası
================================================================================================ */

.contact-page-wrapper { display:flex; gap:40px; }
.contact-page-wrapper > div { flex:1 1 50%; }
.contact-page-wrapper .google-map { height:480px; }

.contact-page-wrapper .contact-info {}
.contact-page-wrapper .contact-info h3 { font-size:1.3rem; font-weight:normal; margin-bottom:15px; }
.contact-page-wrapper .contact-info .tanim { display:flex; margin:0 0 4px 0; }
.contact-page-wrapper .contact-info .tanim > div { display:flex; align-items:center; justify-content:flex-start; flex: 1 1 0; padding:10px; background-color:#EEE; }
.contact-page-wrapper .contact-info .tanim > div:first-child { max-width:120px; font-weight:500; background-color:#DDD }